Question

我有Fiddle，发生了什么，跨度大于应有的范围。

HTML

<div class="input-group">
    <input type="text" class="input-group-addon rounded-left" placeholder="Search for music">
     <span class="input-group-addon">test</span>
     <span class="input-group-addon rounded-right">search</span>       
</div>

CSS

.input-group {
    display: table;
    order-collapse: separate;
}
.input-group-addon{
    border: 1px solid #333;
    display: table-cell;
    height: 50px;
}

Answer 1

只需添加＆＃34; line-height＆＃34;推动价值等于＆＃34;身高＆＃34;。在您的情况下＆＃34; 50px＆＃34;：

.input-group-addon {
    border: 1px solid #333333;
    display: table-cell;
    height: 50px;
    line-height: 50px;
}

Answer 2

作为一种选择，可以这样

.input-group-addon {
    border: 1px solid #333333;
    display: table-cell;
    line-height: 1px;
    padding: 20px 0;

Answer 3

为什么不给它一个宽度和高度？我不认为这个div包含很多内容（最多可能是一两个字）

.input-group span{
    width: 100px;
    height:37px;
 }

SEE DEMO

table-cell跨度错误的高度

3 个答案: