Question

我试图模仿我一直看到的这个菜单，我试过这个：

HTML：

<ol>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
</ol>

CSS：

ol {
    list-style-type: none;
}

ol li {
    display: inline;
    padding-right: 4%;
}

ol li:hover {
    border-bottom: 6px solid lightblue;
}

但问题是，因为我在每个列表项之间保持距离，底部边框将使用所有该空间，是否有办法将其保持在单词的长度并仍保留空间介于两者之间？

Answer 1

只需使用margin-right代替padding-right

Answer 2

我不确定我是否正确理解了您的问题，但您可能会尝试将margin-bottom:1px;添加到“ol li”，以便重新获得<li>之间的空格。

Answer 3

您可以将样式应用于li：

中包含的元素

<ol>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
</ol>

然后它将仅为文本加下划线，而不是整个li。

请参阅JSFiddle

li标签边框底部太长

3 个答案: