小编nib*_*ibs的帖子

我正在尝试将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;*/
}