1

私の Web サイトには横型のメニューがあり、その中の項目には境界線がありません。しかし、マウスオーバー時に1pxの境界線を設定したいので、マウスをその上に移動すると、この新しく作成された境界線が他の要素を約2px左に移動します( border-right= border-left= 1pxのため)。

これは私のコードです

<div id="library_category_wrapper">
    <ul>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item1</a></li>
    </ul>
</div>

そしてこれはcssです

#library_category_wrapper ul 
    {
        list-style: none;
        float: right;
        position: relative; 
        top:5px;
        margin: auto;
    }

#library_category_wrapper ul li 
    {
        display: inline;
        margin-left:8px;
        padding : 4px;
    }

#library_category_wrapper li:hover
    {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        border : 1px solid rgba(0, 0, 0, 0.25);
        border-radius : 4px 4px 4px 4px;
        box-shadow : 0 0 5px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.796), 0 0 10px rgba(255, 255, 255, 0.298);
        padding : 4px;
    }

これはデモです

4

3 に答える 3

4

次のように、通常の状態に透明な境界線を簡単に配置できます。http://jsfiddle.net/Pn8uw/1/

#library_category_wrapper ul li {
    border : 1px solid rgba(0, 0, 0, 0);
}
于 2013-10-08T15:13:39.840 に答える
2

デフォルトの LI 状態に「透明な」境界線を追加できます。

#library_category_wrapper ul li {
  border: 1px solid transparent;
}

デモ: http://jsfiddle.net/Pn8uw/2/

于 2013-10-08T15:13:41.753 に答える
1

ホバー時のパディングを単純に減らすことができます。パディングの代わりに次のプロパティを追加します: 4px;

#library_category_wrapper li:hover {
    padding: 3px;
}

フィドル

于 2013-10-08T15:17:02.447 に答える