-1

次のようになります: (ソース: gyazo.com )画像

私の試み

<div class="header">
   <div class="container">
   <img id="logo" src="img/logo.png"/>
      <ul class="menu">
        <a href="#"><li class="current">Home</li></a>
        <a href="#"><li>Forums</li></a>
        <a href="#"><li>Donate</li></a>
        <a href="#"><li>Vote</li></a>
        <a href="#"><li>Info</li></a>
      </ul>
   </div>
</div>

現在のページの背景には Current クラスを使用します。

ヘッダーを追加しました

.header {
width: 100%;
height: 86px;
background-image: url("../img/gradient.png");
background-repeat: repeat-x;
border-bottom: solid 1px #a2a2a2;
}

フローティング メニューを右に移動し、インラインで表示してテキストを中央揃えにしました

.menu {
float: right;
padding: 2.7%;

}
.menu  a{
color: #1e1e1e;
}
.menu  a:hover{
color: #5e5e5e;
}

.menu li {
display: inline;
float: left;
margin-left: 10px;
padding-left: 20px;
padding-top: 5px;
}

現在の背景の一部

.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
width: 78px;
height: 36px;
padding-left: 20px;
padding-top: 5px;
color: white;
}

結果：

img2
（出典：gyazo.com）

現在のアイテムと他のアイテムの間に大きなスペースがあるのがわかりますか? これを削除するにはどうすればよいですか? 他のスペースと等しくします。

私が試したこと：

相対位置の追加

結果: メニュー項目 'current' がメニュー項目 'forums' の上に移動します

私はそうする他の方法を見つけることができませんでした。何が間違っていますか?

4

2 に答える 2

0

を削除widthし.currentます。それが余分な間隔を追加しているものです。

それを変更したくない場合は、隣接する li の間隔を変更します。

.current + li {
  padding-left: 0;
}

これは、達成しようとしていることの簡単なデモです。そこから学ぶ：

HTML

<ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Forums</a></li>
    <li><a href="#">Donate</a></li>
    <li><a href="#">Vote</a></li>
    <li><a href="#">Info</a></li>
</ul>

CSS

ul {
    float: right;
}

li {
    display: inline;
    padding: 10px;
}

.current {
    background-image: url('http://placekitten.com/200/200');
}

デモ

于 2012-12-23T17:37:55.023 に答える
0

次の HTML を試してください。

<div class="header">
   <div class="container">
      <img id="logo" src="img/logo.png"/>
      <ul class="menu">
        <li class="current"><a href="#">Home</li></a>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Vote</a></li>
        <li><a href="#">Info</a></li>
      </ul>
   </div>
</div>

CSS を次のように修正します。

.menu {
    float: right;
    padding: 2.7%;
}
.menu li {
    float: left;
    margin-left: 10px;
}
.menu  a{
    color: #1e1e1e;
    display: block;
    padding-left: 20px;
    padding-top: 5px;
}
.menu  a:hover{
    color: #5e5e5e;
}
.current {
    background-image: url("../img/hoverdiamond.png");
    background-repeat: no-repeat;
    color: white;
}

HTML の構造が正しくありません<li>。要素をアンカー要素内に配置しないでください。

display: inline;いずれにせよ左にフロートされているため、リスト項目に含める必要はありません。既にインラインになっているはずです。

今後、W3C バリデーターを使用して HTML が有効であることを確認することをお勧めします。HTML のエラーとその修正方法が説明されているはずです。

上記で問題が解決しない場合はお知らせください。もう一度確認いたします。

編集:現在の css 宣言で高さと幅を削除したことを忘れていましたが、これは不要であり、ほぼ間違いなく間隔の問題を引き起こしています。

于 2012-12-23T18:03:54.733 に答える