web-dev-qa-db-fra.com

Simulation de la réduction des bordures dans les listes (pas de tableaux)

J'ai toujours le même problème, quand j'ai 2 éléments adjacents avec des bordures, les bordures sont fusionnées. Avec les tables, nous avons la propriété border-collapse pour résoudre ce problème. 

J'ai essayé d'omettre la bordure de l'un des côtés, mais cela ne fonctionne que pour les éléments situés au milieu, le premier et dernier élément manquera une bordure .

Est-ce que quelqu'un connaît une solution pour les éléments de liste, par exemple? 

csslistbordercollapse
35
Enrique

Vous pouvez ajouter une bordure gauche et inférieure au ul et le déposer du li.

violon: 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;
}
40
Billy Moon

Voici comment j'ai résolu le problème: ajoutez une marge-gauche/-top de -1px à chaque élément li. Ensuite, les frontières s'effondrent vraiment sans aucune astuce.

66
Frederick

Vous pouvez le faire en utilisant des pseudo sélecteurs CSS:

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

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

Cela effacera la bordure droite de tous les éléments li, sauf le dernier de la liste.

7
David Thomas

Un peu tard dans cette soirée, mais voici comment obtenir la bordure complète d'un élément de la liste à modifier en survol.

Commencez par utiliser les bordures (supérieure et latérale) des éléments li, puis attribuez une bordure inférieure au dernier.

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

Ensuite, choisissez un style de bordure de survol:

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

Enfin, utilisez un sélecteur de frères et sœurs pour modifier le bord supérieur de l'élément {suivant} afin qu'il corresponde à celui de l'élément survolé.

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

http://jsfiddle.net/8umrq46g/

2
stereobird

Vieux fil, mais j'ai trouvé une autre solution, et plus importante: 

VOUS NE DEVEZ PAS SAVOIR QUEL IS ÉLÉMENT PARENT 

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

Ce fil est assez ancien, mais j'ai trouvé une nouvelle solution en utilisant la propriété outline. Cela fonctionne pour les listes verticales et horizontales, même si la liste horizontale est longue de plusieurs lignes.

Utilisez une bordure de la moitié de la largeur souhaitée et ajoutez un contour également de la moitié de la largeur souhaitée.

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