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

navbar idではなく、anchorで line-height を定義する必要があります。コード例を参照してください:-

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

これを機能させるには、スタイルをアンカーに適用し、CSS に追加する必要がありdisplay:block;ます。

#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 に答える