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-sizing: border-box;添加到li样式中。它可以告诉浏览器在计算大小时包含边框的宽度，而不是在指定宽度周围添加边框。 more info

Answer 2

此处的问题是box-model，默认情况下，宽度分配给内容框，因此内容的宽度为20％，然后边框位于其外部，这将导致宽度超过100％

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

另一种解决方案是将宽度从20％减小到19％。

在html中将border属性设置为li - tag会将最后一个li元素下移到下一行

3 个答案: