我正在尝试将2个输入元素内联,每个输入元素的宽度为50％.为什么我必须从输入元素中减去边框宽度,即使我使用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;*/
}
解决方法
你在这里遇到的问题与内联块有关.
display：inline-block告诉浏览器将元素视为与其内容有关的块,但作为与其周围环境相关的内联元素.
这里的问题是两个元素周围的环境包括一些空白区域.具体来说,两个元素之间有一些空白区域.空格与内联元素相关,因此也适用于内联块元素.
简而言之,就好像这两个元素是句子中的单词.它们之间的空白被视为两个单词之间的空间.
你最终得到的是50％宽度的一个空格字符的50％宽度.
这是一个众所周知的内联块问题,但确实让人们大开眼界.
因此,快速脏的解决方案是移除空间 – 关闭< select>的结束之间的间隙.并且< input>的开始所以那里没有空间.
其他替代方法包括使用注释来消除差距(丑陋),将容器元素设置为font-size：0px;以及各种其他hacky解决方案.
或者,您可以丢弃内联块.还有许多其他选项可以实现相同或类似的结果 – 特别是float,display：table-cell和flex-Box,但也存在其他选项.
