为什么line-height属性不适用于超链接？

Question

这是超链接的html代码.我希望文本之间略有差距.例如,在"菜单"和"联系我们"之间.提前致谢.

<div id="navbar">

    <a class="fb" href="menu.html">Menu</a></br>
    <a href="ContactUs.html">Contact Us</a></br>
    <a href="About Us.html">About Us</a></br>
    <a href="TC.html">Terms & Conditions</a></br>
    <a href="jobs.html" target="_blank">Jobs</a></br>
    <a href="order.html">Your Order</a>

</div>

我在CSS中设置了line-height属性,如下所示:

#navbar {
  line-height:2em;
}

Answer 1

不要使用<br/>(你一直错误输入),并line-height使用列表并调整列表项的边距.

演示:http://jsfiddle.net/psP7L/

<ul id="navbar">
  <li><a class="fb" href="menu.html">Menu</a></li>
  <li><a href="ContactUs.html">Contact Us</a></li>
  <li><a href="About Us.html">About Us</a></li>
  <li><a href="TC.html">Terms & Conditions</a></li>
  <li><a href="jobs.html" target="_blank">Jobs</a></li>
  <li><a href="order.html">Your Order</a></li>
</ul>

#navbar    { padding:0; margin:0 }
#navbar li { display:block; padding:0; margin:0.3em 0 }

首先是正确的语义标记; 然后让风格正确.

然而,要回答你的问题,但它"工作",它只是line-height对display:inline要素按规范行为不同比它的display:block元素.

Answer 2

您必须将样式应用到锚点，并添加display:block;到 CSS 中才能实现此功能：

#navbar a{
  line-height: 2em;
  display: block;
}

在代码中的一些其他修复中，您最终应该得到类似JSFiddle中的内容。

Answer 3

您应该在锚点而不是导航栏ID中定义行高，请参阅示例代码：-

超文本标记语言

<div id="navbar">

<a class="fb" href="menu.html">Menu</a></br>
<a href="ContactUs.html">Contact Us</a></br>
<a href="About Us.html">About Us</a></br>
<a href="TC.html">Terms & Conditions</a></br>
<a href="jobs.html" target="_blank">Jobs</a></br>
<a href="order.html">Your Order</a>

CSS

#navbar a {
color: red;
line-height: 33px;
text-decoration: none;

}

http://jsfiddle.net/8LFLd/50/

另一种正确的方法是我在下面提到的，您应该在正确的 ul li 列表项中进行导航，如下所述：-

超文本标记语言

<div id="navbar">
  <ul>
    <li><a class="fb" href="menu.html">Menu</a></li>
    <li><a href="ContactUs.html">Contact Us</a></li>
    <li><a href="About Us.html">About Us</a></li>
    <li><a href="TC.html">Terms & Conditions</a></li>
    <li><a href="jobs.html" target="_blank">Jobs</a></li>
    <li><a href="order.html">Your Order</a></li>
  </ul>
</div>

CSS

#navbar li {
    display:block;
    list-style-type:none;
    line-height:25px;
}
#navbar li a {
    text-decoration:none;
    color:red;
}
#navbar li a.fb {
    text-decoration:none;
    color:green;
}

#navbar li a:hover {
    text-decoration:none;
    color:blue;
}

演示：- http://jsfiddle.net/XZ9w7/3/