jquery - 将 border 属性设置为 li - html 中的标记会将最后一个 li 元素降到下一行

Question

我要求 html 标题页中的导航项具有虚线边框。我在 css 文件中设置了 border 属性。我得到了 li 元素的虚线边框，但问题是最后一个 li 元素出现在下一行。

这是我的导航栏 html 代码:

<div class="navbardiv"> <ul class="topnavbarlist"> <li> <a>home</a> </li> <li> <a>store</a> </li> <li> <a>gallery</a> </li> <li> <a>about us</a> </li> <li> <a>sign in</a> </li> </ul> </div>

下面是我的 CSS:

.topnavbarlist
{
 list-style: none;
display:inline-block;
width:100%;
height:100%;
background:#cdeb8e;
list-style-type: none;
}
.topnavbarlist li{
float:left;
width:20%;
height:100%;
display:table-cell;
text-align: center;
list-style-type: none;
border: 1px dashed rgba(84,84,84,0.8);
}

Answer 1

这里的问题是 box-model , 默认情况下，宽度分配给内容框，因此 20% 宽度用于内容，然后边框在内容框之外，这将导致宽度超过 100%。

您可以使用 box-sizing 控制此行为css 属性。

.topnavbarlist {
    list-style: none;
    display:inline-block;
    width:100%;
    height:100%;
    background:#cdeb8e;
    list-style-type: none;
}
.topnavbarlist li {
    float:left;
    width:20%;
    height:100%;
    display:table-cell;
    text-align: center;
    list-style-type: none;
    border: 1px dashed rgba(84, 84, 84, 0.8);
    box-sizing: border-box;
}

<div class="navbardiv">
    <ul class="topnavbarlist">
        <li> <a>home</a> </li>
        <li> <a>store</a> </li>
        <li> <a>gallery</a> </li>
        <li> <a>about us</a> </li>
        <li> <a>sign in</a> </li>
    </ul>
</div>