導航欄頂部和底部填充通過CSS

Question

我想增加頂部和底部填充在下面，但無法讓它工作。即請注意0​​中的填充頂部和底部代碼。它沒有效果。什麼是替代方案？請指教。

ul.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #ff9933; 
 
    font-size: 90%; 
 
    text-align: center; 
 
    } 
 

 
    ul.navbar li { 
 
     margin: auto; 
 
     display: inline; 
 
     border-right: 1px solid #ffb366; 
 
    } 
 

 
    ul.navbar li:first-child { 
 
     border-left: 1px solid #ffb366; 
 
    } 
 

 
    ul.navbar li a { 
 
     display: inline; 
 
     color: white; 
 
     text-align: center; 
 
     padding-left: 10px; 
 
     padding-right: 10px; 
 
     padding-top: 30px; 
 
     padding-bottom: 30px; 
 
     text-decoration: none; 
 
    } 
 

 
    ul.navbar li a:hover { 
 
     background-color: #e67300; 
 
    }

<ul class="navbar"> 
 
<li><a href="/">Home</a></li><li><a href="#">Photos</a></li><li><a href="#">Videos</a></li><li><a href="#">Logout</a></li> 
 
</ul>

我不想以任何方式干擾導航欄的佈局 - 因此不能包括填充頂部和底部的選項<ul> - 即弄亂佈局和懸停都。

Answer 1

inline元素沒有頂部和底部填充。如果您想將這些填充您必須使用block或inline-block元素：

ul.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #ff9933; 
 
    font-size: 90%; 
 
    text-align: center; 
 
} 
 

 
ul.navbar li { 
 
    margin: auto; 
 
    display: inline-block; 
 
    border-right: 1px solid #ffb366; 
 
} 
 

 
ul.navbar li:first-child { 
 
    border-left: 1px solid #ffb366; 
 
} 
 

 
ul.navbar li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    text-decoration: none; 
 
} 
 

 
ul.navbar li a:hover { 
 
    background-color: #e67300; 
 
}

<ul class="navbar"> 
 
<li><a href="/">Home</a></li><li><a href="#">Photos</a></li><li><a href="#">Videos</a></li><li><a href="#">Logout</a></li> 
 
</ul>

Answer 2

9.4.2 Inline formatting contexts

在直列格式化內容，盒水平地佈置，一前一後，在包含塊的頂部開始。水平邊界，邊界和填充在這些框之間受到尊重。

你可以將它設置爲內聯塊，如果你需要辦理垂直填補處理等

ul.navbar li a { 
    display: inline-block; 
}