Question

在大约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不执行任何操作。

Answer 1

你能用填充物和高度/宽度填充你需要的空间吗？

Answer 2

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

Answer 3

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

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

当li显示时，用锚填充li：内联

3 个答案: