如何在父 div 的一行上放置多个输入？ [复制]
Posted
技术标签:
【中文标题】如何在父 div 的一行上放置多个输入？ [复制]【英文标题】：How to fit a number of inputs on one line in parent div? [duplicate] 【发布时间】：2018-08-22 04:31:37 【问题描述】：我正在尝试将 5 个输入放在一行上。很简单，我想。我有一个父 div，它的左右两边都有一些边距。我在里面放入了 20% 宽度的输入（5 x 20 = 100%）。但是最后一个输入到底部，没有理由？有人知道为什么以及如何解决这个问题吗？
<body style="background: orange;">
<div style="margin-left:10px; margin-right:10px;">
<form>
<input style="width: 20%; padding:0; margin:0;" type="text">
<input style="width: 20%; padding:0; margin:0;" type="text">
<input style="width: 20%; padding:0; margin:0;" type="text">
<input style="width: 20%; padding:0; margin:0;" type="text">
<input style="width: 20%; padding:0; margin:0;" type="text">
</form>
</div>
</body>【问题讨论】：
边框和空白 【参考方案1】：我建议使用 flexbox。
form
display: flex;
input
flex: 1;
min-width: 0;
<form>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>为什么您的示例不起作用是因为：
<input> 是内联级别，它还具有从浏览器默认样式表设置的默认填充和边框。
输入框之间也有空白，它们也会被渲染。
要使用原始方法修复它，您可以这样做：
form
font-size: 0; /* remove white space */
input
font-size: 16px; /* reset font size */
width: 20%;
box-sizing: border-box; /* make border and padding part of width and height */
<form>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>您还可以浮动输入框，这样空白就不会被渲染。
form:after /* clear floats */
content: "";
display: table;
clear: both;
input
float: left;
width: 20%;
box-sizing: border-box;
<form>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>【讨论】：
虽然这是在现代网络中如何做到这一点的最佳答案，但如果您还解释了为什么他的方式不起作用，它可能对提问者有用。 （例如，因为逻辑上它似乎像 5x20%=100% 但实际上不是。） 我同意 Roddy 的观点；）因为我想这对他来说会有点复杂，因为他无法看到简单的东西，比如边框/空白it also has default padding --> 特别是边框，因为他已经删除了填充
谢谢！我的问题由此解决！你解决了我的头痛:)
好了各位，已经更新了，只是需要一点时间来写。以上是关于如何在父 div 的一行上放置多个输入？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何将我的 display:flex (css) 限制为每行 2 个 div？ [复制]