在html中设置边界属性为li - 标记将最后一个li元素带到下一行

Question

我有一个要求，那就是html标题页面中的导航项具有虚线边框。我在CSS文件中设置边框属性。我得到了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>

Answer 2

尝试增加box-sizing: border-box;您li风格。它告诉浏览器在计算尺寸时包含边框的宽度，而不是在指定宽度附近添加边框。 more info

Answer 3

另一个解决方案是从20％减少的宽度，以19％。