Question

我认为这应该是直截了当的，但我似乎无法解决这个问题，而且在一个清单上花费几个小时让我疯狂。

我要做的是创建一个2列列表，一边是“标签”，另一边是值。如果我将字体权重设置为正常，或者两边都是粗体，我可以使它工作，但只要我将标签加粗并且值正常，它就会成为楼梯。

A screenshot of it with bold
A screenshot without bold

适用的CSS：

ul.info {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.info li.name {
    width: 150px;
    float: left;
    font-weight: bold;
}

ul.info li.value {
}

HTML：

<ul class="info">
    <li class="name">Member Since</li>
    <li class="value"><?=$user->registerTime ?></li>

    <li class="name">Last Logged in</li>
    <li class="value"><?=($user_login !== null ? $user_login->login_time : 'Never') ?></li>

    <li class="name">Email verified?</li>
    <li class="value"><?=($user->emailVerified ? 'Yes' : 'No') ?></li>
</ul>

我已经把它缩小到粗体，但是没有理由为什么会破坏它。有什么想法吗？

Answer 1

我怀疑它将归结为以某种方式添加额外垂直空间的粗体元素，这可以解释为什么浮动不会交错。您是否将一致的line-height属性应用于列表元素？

使用定义列表比使用无序列表要好得多。这样，您可以完全单独设置dt和dd元素的样式，并且标记的附加优势更加具有语义性。

Answer 2

您可以尝试将LI的高度或最小高度设置为大于粗体字体高度的像素数。

Answer 3

什么浏览器？它对铬我来说很好用我建议检查脚本代码..如果他们生成有效的xhtml。

proof

当一边是粗体时，2列CSS列表中断

3 个答案: