1

リストの最初の要素にカーソルを合わせると、背景全体が別の色に変わります。ただし、最初以外の要素をホバーすると背景も変更されますが、写真でわかるように、背景の一部は変更されません。

ここに画像の説明を入力

HTML:

<div id="add_friend">
    <ul id="frnd_bar_2">
        <li>Add To Friends</li>
        <li>About</li>
        <li>Photos</li>
        <li>Friends</li>        
    </ul>
</div>

CSS:

#frnd_bar_2{
      position:relative;
      list-style: none;
      text-decoration: none;
      display: inline-block;
      border: 1px solid grey;
      border-left: 2px solid grey;
      margin: 0px;
      padding: 0px;
}
#frnd_bar_2 li{
     cursor:pointer;
     list-style: none;
     text-decoration: none;
     display: inline-block;
     border-right: 2px solid grey;
     text-align:center;
     margin: 0px auto;
     padding: 5px;
     padding-left: 30px;
     padding-right: 30px;
     font: 20px sans-serif ;
}
#frnd_bar_2 li:hover {
     background: #aaa;
     margin: 0px auto;
}
#add_friend{
    float:left;
    height:auto;
    background:#efefef;
    margin: 0px;
    padding: 0px;
}

コードに問題はありますか？

4

2 に答える 2

1

私は重要な問題を強調しています：

あなたはするべきではdisplay: inline-blockあり#frnd_bar_2 liません#frnd_bar_2

このデモを参照してください 必要に応じて変更できる他のもの

#frnd_bar_2 li で使用display: table-cell;して #frnd_bar_2 デモからディスプレイを削除するだけでOK

于 2013-09-08T07:14:56.133 に答える