html - 将 2 个 50% 宽度的输入元素排成一行，理解框大小

Question

我试图将 2 个 input 元素内联放置，每个元素的宽度为 50%。为什么我必须从 input 元素中减去边框宽度，即使我使用 box-sizing: border-box 也是如此？

http://jsfiddle.net/Nmvk6/

HTML

<form class="form">
    <div class="form-group">
        <label>Type</label>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-plus-sign"></span>
        </button>
    </div>
    <div class="form-group">
        <select class="form-control half-width-form-control">
            <option value="foo">foo</option>
            <option value="bar">bar</option>
        </select>
        <input class="form-control half-width-form-control" type="number"></input>
    </div>
</form>

CSS

.half-width-form-control {
   display: inline-block;
    width: calc(50% - 2px);
    /*width: 50%;*/
    /*box-sizing: border-box;*/
}

Answer 1

您这里遇到的问题与inline-block有关.

display:inline-block告诉浏览器就其内容而言将元素视为 block ，但就其周围环境而言，则将其视为内联元素。

这里的问题是两个元素周围包含一些空白。具体来说，两个元素之间有一些空白。空白与 inline 有关元素，因此也适用于 inline-block元素。

简而言之，这两个元素就好像是句子中的单词。它们之间的空白被视为两个单词之间的空格。

你最终得到的是 50% width + width of one space character + 50% width .

这是一个众所周知的问题 inline-block ，但确实会绊倒很多人。

因此，quick+dirty 解决方案是删除空格——关闭 <select> 末尾之间的间隙。和 <input> 的开头这样那里就没有空间了。

其他替代方法包括使用注释来消除间隙(丑陋)，将容器元素样式设置为 font-size:0px; ，以及其他各种骇人听闻的解决方案。

或者，您可以丢弃行内 block 。还有许多其他选项可以实现相同或相似的结果——特别是 float , display:table-cell , 和 flex-box , 但其他的也存在。

但我的建议是去掉两个元素之间的空格。快速、轻松地修复。