5

这是超链接的 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;
}
4

4 回答 4

8

不要使用<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

于 2012-05-17T04:45:03.840 回答
3

您应该在锚点中定义行高，而不是在导航栏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/

于 2012-05-17T05:30:38.520 回答
3

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

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

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

于 2017-05-31T11:17:48.397 回答
1 
#navbar a{ display:block;line-height:30px;}

消除

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

于 2012-05-17T04:56:46.687 回答