当显示li时，用锚填充li：inline

Question

After about 15/20 minuets of research and googling I have not found a solution.

I am trying to fill a list item with an anchor however the li is set to display inline code:

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

Sorry for posting such a basic question on here! I cannot figure this one out!

If I set the a{} to display: block it puts the whole li on block, and inline-block does nothing.

Answer 1

您可以仅使用上的填充和高度/宽度来填充所需的空间吗？

Answer 2

如何将高度和宽度应用于<a>标记，并将CSS中的line-height设置为列表项的高度？

Answer 3

Rather than setting the padding and the height on the li, set these on the a and set it to display block. Then set the line-height to the same as the a height and the text will align in the middle vertically.

If you then want the links to appear horizontally, float the li left. I always find when styling navigation it is best to start with the innermost element and work out.