Question

我正在尝试将2个input元素内联，每个元素的宽度为50％。即使我使用input，为什么还必须从box-sizing: border-box元素中减去边框宽度？

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告诉浏览器将元素视为与其内容有关的块，但作为与其周围环境有关的内联元素。

这里的问题是两个元素周围的环境包括一些空白区域。具体来说，两个元素之间有一些空白区域。空格与inline元素相关，因此也与inline-block元素相关。

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

您最终得到的是50% width + width of one space character + 50% width。

inline-block这是一个众所周知的问题，但确实会引起人们的关注。

因此，快速+肮脏的解决方案是移除空间 - 关闭<select>的末尾与<input>的开头之间的间隙，以便那里没有空间。

其他替代方法包括使用注释来消除差距（丑陋），将容器元素设置为font-size:0px;样式，以及各种其他hacky解决方案。

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

但我的建议只是删除两个元素之间的空格。快速，简单的修复。

Answer 2

两个问题：

如果您想让它适用于所有当前浏览器，则需要-webkit-box-sizing和-moz-box-sizing。请参阅MDN page。
两个控件之间有一个空格（实际上是一个返回和一些空格，但它们会折叠到1个空格），因此总宽度为100％加上空格。

解决方案：添加前缀属性并从标记中删除空格。

http://jsfiddle.net/Nmvk6/7/

Answer 3

指定

float:left

它修复了它。

http://jsfiddle.net/Nmvk6/8/

将2个50％宽度的输入元素连续放置，了解盒子大小

3 个答案: