2

したがって、順序付けされていないリストのリスト要素をフローティングして作成した水平ナビゲーションバーがあります。正常に動作しますが、2つのリスト要素が2つの境界線と交わる場所で、目的の2倍の厚さを作成します。これを解決する方法はありますか？

試みた1つの解決策： 個々のリスト要素の左右の境界線プロパティを指定できますが、このアプローチはあまりスケーラブルではないようですが、機能します。

ここhttp://jsfiddle.net/mscpg/で私のコードとデモを表示 するか、以下のコードを調べることができます

css

  #navigation_bar {
            overflow: hidden;
            list-style-type: none;
            width: 100%;
        }
            #navigation_bar li {
                text-align: center;
                float: left;
                width: 33%;
                border-style: solid;
                border-width: 1px;
                border-color: black;
            }

HTML

<ul id="navigation_bar">
    <li>Projection</li>
    <li>Real-Time</li>
    <li>Cleanup</li>
</ul>
4

6 に答える 6

2

1つの解決策は次のとおりです。

#navigation_bar li {
    border: 1px solid black;
    border-left-width: 0;
}

#navigation_bar li:first-child {
    border-left-width: 1px;
}

ライブデモ： http： //jsfiddle.net/mscpg/3/

于 2012-10-02T21:01:23.950 に答える
2

IMO、最も簡単な方法は、これを「#navigation_bar li」定義に追加することです。必要に応じて、1pxのマージンをulに追加して補正します。

margin-right: -1px;

テーブルの場合は、border-collapseプロパティの便利なオプションがあります。

于 2012-10-02T21:02:53.110 に答える
1

多くの可能な解決策があります。例えば：

#navigation_bar {
  overflow: hidden;
  list-style-type: none;
  width: 100%;
}
#navigation_bar li {
  text-align: center;
  float: left;
  width: 32%;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  border-left:none;
}
#navigation_bar li.first {    
  border-left:solid 1px black;
}
<ul id="navigation_bar">
  <li class="first">Projection</li>
  <li>Real-Time</li>
  <li>Cleanup</li>
</ul>

デモ

また-ここに負のマージンがあります</p>

于 2012-10-02T21:04:31.623 に答える
1

I think it would be a better idea to use display: inline-block instead of floating everything. For example:

 

 #navigation_bar {
        overflow: hidden;
        list-style-type: none;
        width: 100%;
    }
    #navigation_bar li {
        text-align: center;
        display: inline-block;
        width: 30%; /* Slightly smaller width to fix the borders */
        border-style: solid;
        border-width: 1px;
        border-color: black;
    }
于 2012-10-02T21:04:57.163 に答える
1

これを行う最も簡単な方法は、リストの最後のアイテムにIDまたはクラスを指定してから、独自の境界線を指定することです。

jsbinで実際の動作を確認してください

于 2012-10-02T21:13:12.373 に答える
0

リストアイテムはいつでもdivに含めることができ、リストアイテムの境界線を希望の表示サイズの半分に指定できます。次に、必要なサイズの半分の左右の境界線で囲まれたdivを指定できます。

于 2012-10-02T21:00:14.590 に答える