How to align radio buttons with text to the left?

问题: Still working on a survey form project and am having trouble with button alignment. As this example below shows, the first radio button should be in line with the text to...

问题:

Still working on a survey form project and am having trouble with button alignment.

As this example below shows, the first radio button should be in line with the text to the left which is the question: Desired result

However, I have played around with display and other CSS elements, even trying margin and padding, none of which seem to make my buttons line up correctly. My buttons shown below: My result

And my relevant code shown below that produced my incorrect result:

HTML:

 <label for="recommend">*How likely is that you would recommend freeCodeCamp to a friend?</label>
      <div class="button-group">
        <div class="label-button"> <label for="recommend"><input type="radio" id="recommend" class="input-box" name="recommend" value="definitely">Definitely</label>
        </div>
<div class="label-button">
        <input type="radio" name="recommend" class="input-box" name="recommend" value="maybe">Maybe</label>
      </div>
      <div class="label-button">
        <input type="radio" name="recommend" class="input-box" name="recommend" value="not-sure">Not sure</label>
  </div>

CSS:

#survey-form {
  width: 70%;
  max-width: 640px;
  margin: 0 auto;
}
.row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.row > * {
  flex-basis: 50%;
  box-sizing: border-box;
}
.row label {
  text-align: right;
}
.input-field {
  margin-left: 1em;
  padding: 0.5em;
  margin-bottom: 0.5em;
  height: 40px;
  width: 280px;
  border: 1px solid gray;
  border-radius: 2px;
}
.input-select {
  margin-left: 1em;
  padding: 0.5em;
  margin-bottom: 0.5em;
  width: 100px;
  height: 40px;
  border: 1px solid gray;
  border-radius: 2px;
}
.button-group {
  padding-left: 0.5em;
}
form {
  width: 70%;
  max-width: 640px;
  margin: 0 auto;
}
.label-button {
  margin-bottom: 0.5em;
}

Codepen link also here: https://codepen.io/jerryd2304/pen/qvERZL


回答1:

adding align-item to flex-start 

.row.align-item-start {
  align-items: flex-start;
}

 <div class="row align-item-start">

[here is the codepen link for the same][1]

[https://codepen.io/dasg1/pen/WmQgqy][1]
  • 发表于 2019-03-03 18:03
  • 阅读 ( 182 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除