通过CSS

Question

我试图在下面增加顶部和底部填充，但无法使其工作。即注意ul.navbar li a中的填充顶部和底部代码。它没有效果。什么是另类？请指教。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我不想以任何方式扰乱导航栏的布局 - 因此无法在<ul>中包含填充顶部和底部选项 - 这会影响布局和徘徊。

Answer 1

9.4.2 Inline formatting contexts

  

在内联格式化上下文中，框从水平排列，一个接一个，从包含块的顶部开始。这些框之间会考虑水平边距，边框和填充。

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

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

Answer 2

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>