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元素behaves differently per the spec上display:inline而不是display:block元素。

Answer 2

你应该在锚点中定义一个行高，而不是在导航栏 id中查看示例代码： -

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>

<强> CSS

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

}

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

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

<强> HTML

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

Answer 3

#navbar a{ display:block;line-height:30px;}

删除

demo http://jsfiddle.net/psP7L/1/

Answer 4

您必须将样式应用于锚点，并将display:block;添加到CSS中以使其工作：

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

在您的代码中的其他一些修补程序中，您最终应该使用此JSFiddle中的内容。

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

4 个答案:

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