垂直对齐单选和复选框按钮标签和输入元素
卢克·贝内特
我查看了其他垂直对齐问题和答案，但似乎找不到有效的答案。我想知道你们中是否有聪明的人知道如何解决我的问题。我可能进入了我的洞有多深。
你可以在这里查看我的代码：https : //github.com/LukeBennettUK/techdegree_project_3
我正在尝试将这些对齐。我曾尝试使它们成为弹性项目，然后添加边距底部。但是由于某种原因，底部项目似乎在上面的项目之间有更大的余量，如下所示：
我知道很挑剔。但我只希望它们都正确对齐。谢谢你。
耶
Flexbox 很神奇，它会改变你的生活。过去一年我没有在我的代码中使用浮动，我很喜欢它！哈哈
在下面的示例中，我将 flex 应用于保存输入和标签的父容器。justify-content将所有内容都向左对齐，同时将align-items所有孩子完美地居中。
这是一个很好的资源，可以教你使用 flex 构建的所有很酷的布局：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
ul{
list-style-type:none;
}
.newsletter-row{
display:flex;
justify-content:flex-start;
align-items:center;
}<ul>
<li class="newsletter-row">
<input type="checkbox" id="css_nl" value="css" name="css_news">
<label for="css_nl">CSS News</label>
</li>
</ul>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
标签分为两行时的垂直对齐标签和复选框
- 2
Bootstrap复选框输入垂直对齐
- 3
复选框和单选按钮的行为
- 4
垂直对齐多个复选框
- 5
无线电和复选框与 bootstrap 4 beta 3 的垂直对齐
- 6
更正修改后的复选框以及单选按钮和标签的位置
- 7
Bootstrap表单水平垂直对齐复选框（不带标签文本）
- 8
带有输入、复选框和单选按钮的 Angularjs 表单验证
- 9
在输入旁边，Bootstrap的v4.5复选框无法水平或垂直对齐
- 10
按钮标签和动态内容的垂直对齐
- 11
Laravel标签内的单选和复选框
- 12
单选按钮，复选框和选择元素不会相应地填充
- 13
PHP会话回显复选框和单选按钮
- 14
更改单选按钮和复选框的默认行为
- 15
正确的复选框和单选按钮分组方式
- 16
单选按钮和复选框。防止更改值属性
- 17
单选按钮和复选框（如Dynpro OO控件）？
- 18
css仅样式复选框和单选按钮
- 19
带有复选框和单选按钮的TreeView
- 20
单选按钮和复选框的样式不正确
- 21
ionicons用图标替换复选框和单选按钮
- 22
复选框和单选按钮不会显示
- 23
ReactJS 中的单选按钮和复选框的 onChange 或 onClick
- 24
如何更改单选和复选框输入的样式
- 25
设置所有输入的样式，但复选框和单选
- 26
HTML单选和复选框输入是否合并？
- 27
设置所有输入的样式，但复选框和单选
- 28
裁剪复选框和单选XUL元素无效
- 29
自定义复选框和标签对齐
我来说两句