在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％。