1

メニューリンクにカーソルを合わせると、他のリンクが横に移動するので少し問題がありますが、他のリンクが安定している必要があります。どうすれば修正できますか？

HTML：

<div id="top">
    <a href="index.php?id=pagrindinis"><div id="logo"></div></a>
    <div id="menu">
        <ul id="nav">
            <li><a href="index.php">Pagrindinis</a></li>
            <li><a href="#">Taisyklės</a></li>
            <li><a href="#">Pamokos</a></li>
            <li><a href="#">Kontaktai</a></li>
            <li><a href="#">Facebook</a></li>
        </ul>
    </div>

CSS：

#menu #nav {
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    list-style:none;
}

#menu #nav li {
    display: inline-block;
    padding: 0px 10px 0px 10px;
}

#menu #nav li a {
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
}

#menu #nav li a:hover {
    color: #0a813c;
    font-style: italic;
}

JSFIDDLE： http: //jsfiddle.net/nJgyn/1/

手伝ってくれてありがとう

4

3 に答える 3

2

それはあなたfont-style:italicが余分なスペースを取るからです。

に固定widthを追加できliます。

#menu #nav {
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  list-style: none;
}

#menu #nav li {
  display: inline-block;
  padding: 0px 10px 0px 10px;
  width: 50px;
}

#menu #nav li a {
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  text-decoration: none;
}

#menu #nav li a:hover {
  color: #0a813c;
  font-style: italic;
}
<div id="menu">
  <ul id="nav">
    <li><a href="index.php">Pagrindinis</a></li>
    <li><a href="#">Taisyklės</a></li>
    <li><a href="#">Pamokos</a></li>
    <li><a href="#">Kontaktai</a></li>
    <li><a href="#">Facebook</a></li>
  </ul>
</div>

JSfiddle。

于 2013-03-27T09:46:28.887 に答える
2

別の解決策は次のとおりです。スペース/nbspを追加できます。タグの後、斜体のホバーバグを修正します。

  1. HTMLメソッド：

    <a href="#">Link&nbsp;</a>

  2. Cssメソッド：

    #menu #nav li a:after { content: "\0000a0"; }

于 2013-07-20T20:28:51.263 に答える
0 
#menu #nav li {
display: inline-block;
width: 100px;
text-align: center;
}

#menu #nav {
font-family: Segoe UI, Arial, sans-serif;
font-size: 14px;
color: white;
list-style: none;
padding: 0px;
display: table;

}

于 2013-03-27T09:57:03.837 に答える