css - 导航栏顶部和底部填充通过 CSS

Question

我试图增加下面的顶部和底部填充，但无法让它工作。 IE。注意 ul.navbar li a 中的填充顶部和底部代码.它没有效果。有什么选择？请指教。

    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

9.4.2 Inline formatting contexts

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

如果你需要应用垂直填充等，你可以将它设置为内联 block 。

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