html - 显示li时用anchor填充li :inline

Question

经过大约 15/20 分钟的研究和谷歌搜索，我没有找到解决方案。

我正在尝试用 anchor 填充列表项，但是 li 设置为显示内联代码:

#nav{
    font-family:"chaparral-pro", Georgia, "Times New Roman", serif;
    position: relative;
    background-color: #404041;
    width: 100%;
    height: 40px;
    text-align: center;
    font-size: 15px;
    margin-top: -15px;
}

#nav a{
    color: #f9a13e;
    text-decoration: none;
}

#nav a{
    display: inline-block;
    height: 100%
}

#nav a:hover{
    color: #fff;
    text-decoration: none;
}


ul#navInner{
    position: relative;
    text-align: left;
    width: 840px;
    margin: 0 auto;
    height: 40px;
    padding-top: 10px;
}

ul#navInner li{
    display: inline;
    border-right: 1px solid white;
    height: 40px;
    padding: 11px 8px 16px 8px;
}

li.noBorderR{
    border: none !important;
}

HTML:

<div id="nav">
  <ul id="navInner">
    <li><a href="_#">Home</a></li>
    <li><a href="_#">About Us</a></li>
    <li><a href="_#">Our People</a></li>
    <li><a href="_#">How can we help</a></li>
    <li><a href="_#">Newsroom</a></li>
    <li><a href="_#">Resources</a></li>
    <li><a href="_#">Careers</a></li>
    <li><a href="_#">Contact Us</a></li>
    <li class="noBorderR"><a href="_#">Text Size</a></li>
  </ul>
</div><!-- end nav -->

很抱歉在这里提出这样一个基本问题!我无法弄清楚这个!

如果我将 a{} 设置为显示: block ，它会将整个 li 放在 block 上，而内联 block 什么都不做。

Answer 1

您可以只使用 padding 和 height/width 来填充您需要的空间吗？