Question

我在列表中遇到了一些内联块div的问题。超过2行的项目比单行更深。谁能告诉我为什么？

你可以在这里看到我的问题..

<ul>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 2 lines - im longer!</div>
    </li>
</ul>

http://jsfiddle.net/6aqtpoee/

Answer 1

使用vertical-align: bottom或其他值修正垂直对齐方式：）

Answer 2

您应该为li添加vertical-align: top。它强制块通过其顶部边界对齐，而不是基线。

Answer 3

在float:left元素中使用li：

检查DEMO

li {
display: inline-block;
float: left;
width: 166px;
margin: 20px 10px 0 0;
}

Answer 4

请参阅此链接DEMO

CSS

.top {
    height: 130px;
    background: #000;
}

.bottom {
    height: 60px;
    padding: 10px 15px;
    background: #4f1d4e;
}

li {
    display: inline-table;
    width: 166px;
    margin: 20px 10px 0 0;
}

Answer 5

问题是vertical-align属性默认为基线。

将您的CSS更改为：

li {
    display: inline-block;
    width: 166px;
    margin: 20px 10px 0 0;
    vertical-align: top;
}

Fiddle

或者您可以使用float：left，如下所示：

li {
    display: inline-block;
    width: 166px;
    margin: 20px 10px 0 0;
    float: left;
}

Fiddle

Answer 6

发生这种情况的原因是vertical-align元素的默认li属性设置为baseline。根据{{3}}：

＆＃34;的基线
将元素的基线与其父元素的基线对齐。一些替换元素的基线，如HTML规范未指定，这意味着它们对此关键字的行为可能会从一个浏览器更改为另一个浏览器。＆＃34;

正如它提到的那样，该属性可能无法预测浏览器到浏览器，因此请给垂直对齐一个正确的值，如top或bottom。

列表项的HTML和CSS内联问题

6 个答案:

CSS