css - リスト内の境界の折りたたみのシミュレーション（テーブルなし）

Question

私はいつも同じ問題を抱えています。境界線のある2つの隣接する要素がある場合、境界線がマージされます。テーブルを使用すると、これを解決するためのborder-collapseプロパティがあります。

片側の境界線を省略しようとしましたが、これは中央の要素に対してのみ機能し、最初と最後の要素は境界線を見逃します。

たとえば、誰かがリスト要素の解決策を知っていますか？

Answer 1

これが私がそれを解決した方法です: -1px の margin-left/-top を各 li 要素に追加します。その後、国境はトリックなしで本当に崩壊します。

Answer 2

左と下の境界線を ul に追加し、li から削除できます。

フィドル: http://jsfiddle.net/TELK7/

html:

<ul>
    <li>one</li>
    <li>two</li>
</ul>

CSS:

ul{
    border: 0 solid silver;
    border-width: 0 0 1px 1px;
}
li{
    border: 0 solid silver;
    border-width: 1px 1px 0 0;
    padding:.5em;
}

Answer 3

これは、CSS 疑似セレクターを使用して行うことができます。

li {
    border: 1px solid #000;
    border-right: none;
}

li:last-child {
    border-right: 1px solid #000;
}

これにより、リストの最後のものを除くすべての li 要素の右側の境界線がクリアされます。

Answer 4

このパーティーには少し遅れましたが、ホバー時にリスト項目の完全な境界線を変更する方法を次に示します。

まず、要素に (上と横の) ボーダーを使用しli、最後の要素に下のボーダーを付けます。

li:last-child {border-bottom:2px solid silver;}

次に、ホバー ボーダー スタイルを選択します。

li:hover {border-color:#0cf;}

最後に、兄弟セレクターを使用して、ホバー アイテムのホバー ボーダーと一致するように次のアイテムの上枠を変更します。

li:hover + li {border-top-color:#0cf;}

http://jsfiddle.net/8umrq46g/

Answer 5

このスレッドはかなり古いものですが、outline プロパティを使用して新しい解決策を見つけました。水平方向のリストが複数行の長さであっても、垂直方向と水平方向のリストで機能します。

意図した幅の半分の境界線を使用し、意図した幅の半分のアウトラインも追加します。

ul {
  list-style-type: none;
  width: 100px;
  margin: 0;
  /* also set the parent's padding to half of the intended border's width to prevent the outlines from overlapping anything they shouldn't overlap */
  padding: 0.5px;
}
li {
  display: inline-block;
  float: left;
  box-sizing: border-box;
  text-align: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;

  /* simulates a 1px-wide border */
  border: 0.5px solid black;
  outline: 0.5px solid black;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Answer 6

要素にマージンを与えます。例えば、

HTML：

<ul>
    <li>Stuff</li>
    <li>Other Stuff</li>
<ul>

CSS：

li { border: 1px solid #000; margin: 5px 0; }

jsfiddleの例