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;
}

问题在于div有id'sectionheading'。当我在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

解决此问题的另一种选择..

grouped.reset_index().sort(["Manufacturer","Product Launch Date"])

.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;
}

Answer 4

当存在文本时发生这种情况的原因是因为默认情况下给出了高度并且没有添加适当的填充高度。您可以添加vertical-align: top;或添加line-height: 24px;并移除height。

小提琴：Example

使用显示内联块在div中输入文本时对齐更改

4 个答案: