Question

我无法在使用<div display='table-cell'>时使两个组件对齐。第一个组件显示在顶部有一个间隙。我想让它们显示出来以便它们对齐。

这是JsFiddle：http://jsfiddle.net/66s7x5fr/

以下是 HTML ：

<div class="form-group modifierColumn">
    <div class="cell">
        <select class="form-control input-sm btn-primary">
            <option value="Broad">Broad</option>
            <option value="Moderate">Moderate</option>
            <option value="Single">Single</option>
        </select>
    </div>
    <div class="cell"> 
        <span class="input-group input-group-sm">
            <span class="input-group-btn"> 
                <button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button> 
            </span> 
            <input class="form-control text-justify" type="text" value="0"> </input>
            <span class="input-group-btn"> 
                <button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button> 
            </span>
        </span>
    </div>
</div>

这是 CSS ：

.modifierColumn .cell:not(:last-child) {
    padding-right: 5px;
}
.cell {
    display: table-cell;
}

Answer 1

尝试

.cell {
    vertical-align: bottom;
    display: table-cell;
}

有点模糊的规则。困惑很多。查看Understanding vertical align

Answer 2

与nocarrier的回应相似：

.cell {
    vertical-align: top;
    display: table-cell;
}

Answer 3

您的问题是类单元格的顶部填充。尝试使用col-md-x来提高响应速度。

<div class="form-group modifierColumn" tabindex="0">
    <div class="col-xs-3">
        <select class="form-control input-sm btn-primary">
            <option value="Broad">Broad</option>
            <option value="Moderate">Moderate</option>
            <option value="Single">Single</option>
        </select>
    </div>
    <div class="col-xs-4"> 
        <span class="input-group input-group-sm">
            <span class="input-group-btn"> 
                <button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button> 
            </span> 
            <input class="form-control text-justify" type="text" value="0"> </input>
            <span class="input-group-btn"> 
                <button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button> 
            </span>
        </span>
    </div>

HTML / CSS显示=表格行对齐

3 个答案: