0

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

我正在尝试用锚填充列表项，但是 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{} 设置为 display: block 它会将整个 li 放在块上，而 inline-block 什么也不做。

4

3 回答 3

1

您可以只使用填充和高度/宽度来填充您需要的空间吗？

于 2013-01-21T16:33:42.373 回答
0

如何将高度和宽度应用于<a>标签并line-height在 css 中设置列​​表项的高度？

于 2013-01-21T16:34:32.303 回答
0

不要在 li 上设置填充和高度，而是在 a 上设置这些并将其设置为显示块。然后将 line-height 设置为与 a 高度相同，文本将在中间垂直对齐。

如果您希望链接水平显示，请将 li 向左浮动。我总是发现，在设计导航样式时，最好从最里面的元素开始并解决。

于 2013-01-21T16:43:40.860 回答