html - 流经下一行的总百分比为 100%

Question

这是我的代码:http://jsfiddle.net/Loaz7gcu/

我有三个输入，它们应该放在一行中，等于 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 删除空白，然后设置 font-size: 16px; 为输入。

JSFiddle - DEMO

HTML:

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

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input {
    display:inline-block;
    font-size:16px;
}
.one {
    width: 30%;
    margin-right: 10%
}
.two {
    width: 30%;
    margin-right: 10%
}
.three {
    width: 20%
}