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

这里的问题是两个元素周围的环境包括一些空白区域.具体来说,两个元素之间有一些空白区域.白色空间与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,但其他人也同样存在.

但我的建议是删除两个元素之间的空格.快速,轻松修复.