0

2 つの文字を並べて表示し、周囲に境界線を付けます。

HTML :

<div class="status">C</div>
<div class="status">A</div>

<a>A link</a>

CSS :

.status{ 
    display: block;
    float:left; border: 3px solid gray;   
    font-size: 3em
}

それらに続くアンカーもあります。

わかりましたので、これは C と A を周囲に境界線で生成しますが、ご覧のとおり:

http://jsfiddle.net/FgqHa/1/

それらの間の境界線は、C の境界線と D の境界線で構成されています。したがって、それらの間の太さは 2 倍になります。6px。

2つの間の境界がわずか3pxになるようにするための最良の方法を誰かが提案できますか?

また、リンクは次の行に表示されるはずですが、文字の右側にあります。次の行に強制する方法は?

4

2 に答える 2

6

これは、編集した jsfiddle という要素の動的リストに対して機能するはずです。

魔法は疑似クラス:first-child（:last-childも可能）です。

于 2012-07-16T23:25:38.483 に答える
0

border-right:1.5px左側と右側に を設定するborder-left:1.5pxか、2 つのうちの 1 つだけに内側の境界線を設定します。それか、おそらくmargin-left:-3px正しいものに設定します（これが機能するかどうかはわかりません）。

それについて考えると、ブラウザが半分のピクセルで奇妙なことをすることを決定した場合に備えborder-right:0pxて、おそらく左のものと左のものにあるでしょう。border-left:3px

于 2012-07-16T23:23:14.000 に答える