css - 外枠に比べて内枠が太い

Question

http://jsfiddle.net/MzqYL/3/

上記の例では、フレームの境界線が内側の境界線よりも細くなっています。

この違いを修正するにはどうすればよいですか？

画像: http://i.stack.imgur.com/FEtio.png

Answer 1

ここに私が持っているものがあります:

body {
    margin: 10px;
}
ul {
    list-style: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    border-bottom: 0;
    border-right: 0;
}
ul:after {
    content: "";
    display: table;
    height: 0;
}

li {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    float: left;
    width: 50%;
}

/* Styles for Menu Items */
ul li a {
    text-decoration: none;
    color: #777;
    padding: 5px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

li > a {
    display: block;
}

ul li a:hover {
    color: #E2144A;
    background: #f9f9f9;
}

/* Hover Styles */
li ul li a {
    padding: 2px 5px;
}

/* Sub Menu Styles */
​

いくつかのポイント:

• あなたと私たちのために、コードを適切にインデントしてください。
• 私がしたことは、要素に左と下の境界線を設定し、a要素に上と左の境界線を設定することulです。これにより、一貫した 1px の境界線が作成されます。
• ulフローティング要素の高さを指定するには、clearfix を使用します。
• box-sizing: border-boxを設定すると、パディングとボーダー（マージンではない）を含めwidth: 50%て50％になるように使用します。

Answer 2

方法があります：http://jsfiddle.net/MzqYL/9/

基本的な考え方は、内部要素の両側に境界線を定義し、欠落している境界線をメインのラッパー要素に追加することです。

Answer 3

問題は、上のボックスの 1 ピクセル + 下のボックスの 1 ピクセル = 2 ピクセルになるように境界線を積み重ねていることです。そのため太く見えるのです。

これを解決する方法は、ボックスの種類ごとに異なるスタイルを適用することです。4種類あり、

1. 通常のボックス (左と上に境界線) スタイルが追加されました
2. 右側のボックス (左右と上部の境界線)
3. 下部のボックス (左上と下部の境界線)
4. 右下にある 1 つのボックス (4 つの境界線すべて)

jsfiddle の例

この例では、2 つの css クラスが追加されています: .right と .last 1 つのボックスに複数のクラスを与えるだけ<li><a class="right last">...</a></<li>で、リスト項目にスタイルを簡単に適用できます。