web-dev-qa-db-ja.com

リスト内のボーダー折りたたみのシミュレーション（テーブルなし）

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

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

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

csslistbordercollapse
38
Enrique

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;
}
44
Billy Moon

解決方法は次のとおりです。各li要素に-1pxのmargin-left/-topを追加します。それから、ボーダーは本当にトリックなしで崩壊します。

69
Frederick

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

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

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

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

8
David Thomas

このパーティーには少し遅れましたが、ホバー時に変更するリストアイテムのcomplete境界線を取得する方法は次のとおりです。

最初に、li要素で（上と側の）ボーダーを使用し、最後のボーダーに下のボーダーを付けます。

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

次に、ホバー境界線スタイルを選択します。

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

最後に、兄弟セレクターを使用して、nextアイテムの上境界線を変更して、ホバーアイテムのホバー境界線と一致させます。

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

http://jsfiddle.net/8umrq46g/

2
stereobird

古いスレッドですが、私は別の解決策を見つけましたが、より重要です：

IS親要素を知っている必要はありません

li{
  border: 2px solid gray;
}

li + li{
  border-top: none;
}

/* Makeup */ li{width: 12rem;list-style: none;padding: .5rem 1rem;}
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
1
Gerard Reches

このスレッドはかなり古いですが、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>
0
EKW