如何将单选按钮与左侧的文本对齐？
杰瑞
仍在处理调查表单项目，但在按钮对齐方面遇到问题。
如下例所示，第一个单选按钮应该与左边的文本一致，这是问题： 
但是，我尝试过display和 其他 CSS 元素，甚至尝试过margin和padding，但似乎都没有使我的按钮正确排列。我的按钮如下所示：
下面显示的相关代码产生了我不正确的结果：
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 链接也在这里：https ://codepen.io/jerryd2304/pen/qvERZL
Guru1988
你需要添加 align-item: flex-start
.row.align-item-start {
align-items: flex-start;
}
<div class="row align-item-start">
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS：如何将文本对齐到图像的中心（左侧）
- 2
如何将文本居中对齐在左侧位置？
- 3
将文本与单选按钮的右侧对齐
- 4
如何将按钮A放在按钮B下方，使A的左侧与B的中心垂直对齐？
- 5
Android：如何将单选按钮的文本设置为Integer？
- 6
如何将表单文本恰好放在单选按钮的前面
- 7
如何将文本放入单选按钮标签中？
- 8
如何将按钮与文本区域对齐
- 9
如何将按钮与文本区域对齐？
- 10
如何将文本输入与<td>中的排序按钮对齐？
- 11
Ext.js：如何将按钮对齐到标题的左侧？
- 12
如何对齐单选按钮？
- 13
单选按钮文本未对齐
- 14
如何将标签与单选按钮关联？
- 15
Gtk +：如何将标签对齐到表格的左侧
- 16
如何在 HTML 和 CSS 中对齐单选按钮文本？
- 17
如何将文本或数字放在Android中的单选按钮内？
- 18
如何在单选按钮本身下方对齐单选按钮的文本
- 19
如何将按钮右对齐？
- 20
如何将<svg>元素与文本对齐？
- 21
如何将图像与文本对齐
- 22
如何将按钮与HTML中的表格行中的文本对齐
- 23
如何将多行按钮与其中的不同文本对齐？
- 24
如何将后退按钮放在ActionBar的左侧
- 25
如何将按钮数组放在框架的左侧
- 26
如何将单选按钮更改为Bootstrap按钮
- 27
如何将图标左对齐并在文本右对齐
- 28
如何将文本与父对齐小部件的中心对齐
- 29
将文本与上部文本的右侧对齐（与左侧对齐）。宽度未知
我来说两句