Question

我有三个输入应该适合一行，相当于100％但是一个坐在下一行。我已经清除了所有的边距和填充但仍然没有运气。我在这里做错了什么？

我的示例CSS：

* {
    margin: 0;
    padding: 0
}
.one {
    width: 30%;
    margin-right: 10%
}
.two {
    width: 30%;
    margin-right: 10%
}
.three {
    width: 20%
}

Answer 1

您可以使用box-sizing: border-box;和display:inline-block;至input并使用font-size:0px;至div删除空格，然后设置{{{} 1}}输入。

JSFiddle - DEMO

<强> HTML：

font-size: 16px;

<强> CSS：

<div style="width: 100%; font-size:0px;">
    <input class="one">
    <input class="two">
    <input class="three">
</div>

Answer 2

您应该注意两件事：

在内联流程中，有一个whitespace between inline level elements.
默认情况下，UAs将边框应用于输入元素，导致总宽度超过容器宽度的100%。

话虽这么说，你可以浮动input并给box-sizing: border-box实现目标：

<强> Example Here

input {
    float: left;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

并且不要忘记容器末尾的clear the float。

Answer 3

另一种解决方案是在display: flex容器中使用div：

<强> HTML

<强> CSS

* {
    margin: 0;
    padding: 0
}
.one {
    width: 30%;
    margin-right: 10%
}
.two {
    width: 30%;
    margin-right: 10%
}
.three {
    width: 20%
}
div {
    width: 100%;
    display: flex;
}

fiddle

<强>参考

flex CSS属性是一个指定能力的速记属性一个弹性项目来改变其尺寸以填充可用空间。柔性可以拉伸项目以使用与其成比例的可用空间弯曲成长因子或它们的弹性收缩因子以防止溢出。

Answer 4

你需要添加这个

input{
   box-sizing:border-box;
}

因为每个元素都有100％+左右边框...所以这是100％+ 6px; border-box会使边框位于不在其外部的div内

并且由于元素之间的空白，你必须弄脏输入

将它们添加到同一行或：

   <input><!--
--><input><!--
--><input>

添加评论，例如

下一行的总流量百分比为100％

4 个答案: