1

ここに私の問題があります: http://jsfiddle.net/aWmku/

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li style="border: 2px solid blue;">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

CSS

ul {
    list-style: none;
   margin: 0;
    padding: 2px;
    display:block;
    clear:both;
    width:400px;
}

li {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    width: 129px;
    height: 120px;
    border: 1px solid grey;
    margin-left: -1px;
    margin-top: -1px;
    padding: 8px;
    position: relative;
}

1px の灰色の境界線を折りたたむために -1px の上下マージンを使用して、順序付けされていないリスト項目で作成されたテーブルがあります。セルの1つに2pxの青い境界線を作成しようとしました。ズームインすると、5 番目のリスト項目に2px の青い境界線が上と左にありますが、隣接するアイテムの 1px の灰色の境界線が右と下に上書きされます。

私が達成しようとしているのは、1 つの (クリック/フォーカスされた) セルに 2px の青い境界線を作成することです。これは、この図のようにセルに配置されます。

4

2 に答える 2

0

必要なのは、隣人の上に配置することです。

li {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    width: 129px;
    height: 120px;
    border: 1px solid grey;
    margin-left: -1px;
    margin-top: -1px;
    padding: 8px;
    position: relative;
    z-index: 1;
}

li:nth-child(5) {
    border: 2px solid blue;
    z-index: 2;
}

デモ

トリックは、隣接要素よりも大きい z-index を要素に設定することです

(CSS を介して機能するようにスタイルを更新しました。インライン スタイルは好きではありません :-)

于 2013-09-10T17:37:01.840 に答える
0

ただし、css で nth-child () を使用することは IE <9 ではサポートされていません。次のような javascript を使用してこれを行うことができます: demo :

$('ul li').eq(4).css("border","2px solid blue");
于 2013-09-10T17:47:04.750 に答える