在带有显示内联块的 div 中输入文本时对齐方式发生变化

Question

遇到一个问题，当我在 div 中输入文本并将显示属性设置为内联块时。这是 HTML:

<div class="row" id="section">
    <div class="sectionheading">
    </div>
    <div class="sectionheading">
    </div>
    <div class="sectionheading">
    </div>
    <div class="sectionheading" id="sectionheading">
        <span>Text</span>
    </div>
</div>

CSS:

.sectionheading {
    display: inline-block;
    width: 6px;
    background-color: #df5e5e;
    height:35px;
}

#sectionheading {
    width: 150px !important;
}

#section {
    margin-left:10px;
    margin-top: 40px;
}

问题出在 ID 为 'sectionheading' 的 div 上。当我像 HTML 中那样有文本时，由于某种原因它会向下移动，但是当 div 为空时，它会与其他 div 正确对齐。这里有什么问题？

Answer 1

使用vertical-align: top; 将解决您的问题。

如果您正在使用 display: inline-block;，则需要设置 div 的 vertical:align 属性。因为默认它的 vertical-align 值是 baseline.

.sectionheading {
    background-color: #df5e5e;
    display: inline-block;
    height: 35px;
    vertical-align: top;
    width: 6px;
}

勾选Fiddle Here.

Answer 2

这样试试：Demo

.sectionheading {   
    vertical-align:top;
}

Answer 3

解决这个问题的另一种选择..

.sectionheading {
    display: inline-block;
    width: 6px;
    background-color: #df5e5e;
    height:35px;
    float: left;
    margin-right:10px;
}

#sectionheading {
    width: 150px !important;
   
}

#section {
    margin-left:10px;
    margin-top: 40px;
}

<div class="row" id="section">
    <div class="sectionheading">
    </div>
    <div class="sectionheading">
    </div>
    <div class="sectionheading">
    </div>
    <div class="sectionheading" id="sectionheading">
        <span>Text</span>
    </div>
</div>

Answer 4

之所以在有文字的情况下出现这种情况，是因为默认给定了一个高度，没有添加合适的padding高度。您可以添加 vertical-align: top; 或添加 line-height: 24px; 并删除 height.

Fiddle : Example

在带有显示内联块的 div 中输入文本时对齐方式发生变化

Alignment changes on entering text within a div with display inline-block

html

css

alignment