4
votes

Élément de liste horizontal avec une ligne entre

J'essaie de positionner une fine ligne grise entre les éléments

sur une barre de navigation horizontale pour fournir une perception de connexion entre les éléments. Le code serait celui ci-dessous. Comment puis-je ajouter une ligne simple entre ces éléments?

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

ul {
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
}
li {
    display: block;
    flex: 0 1 auto; /* Default */
    list-style-type: none;
}

html css flexbox

2 commentaires

Lorsque vous dites «entre», voulez-vous dire que la ligne doit passer par le milieu des caractères eux-mêmes?

Je voulais dire non pas à travers les éléments, mais côte à côte horizontalement entre les éléments

4 Réponses :

3
votes

Voici un exemple de ligne entre chacun des li s.

Ajoutez position: relative à l'élément ul pour qu'il devienne parent de l'élément : after
Position : après au milieu vertical des caractères par translation verticale
Fournissez des z-index et background-color aux li s afin qu'ils restent "au-dessus" de la ligne grise li >

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

ul {
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

li {
    display: block;
    flex: 0 1 auto; /* Default */
    list-style-type: none;
    background-color: white;
    padding: 0 0.75em;
    z-index: 1;
}

li:first-child {
    padding-left: 0;
}

li:last-child {
    padding-right: 0;
}

ul:after {
    content: '';
    border-bottom: 1px solid lightgray;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    width: 100%;
}

1 commentaires

Merci Andy, c'est exactement ce que j'ai pensé.

-1
votes

Si cela ne vous dérange pas de centrer le texte sur la barre de navigation, cette solution devrait fonctionner pour vous.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

ul {
  display: flex;
  align-items: stretch; /* Default */
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
}
li {
  display: block;
  flex: 0 1 auto; /* Default */
  list-style-type: none;
  flex:1;
  text-align:center;
  border-right:1px solid gray;
}
li:last-of-type{
  border-right:none;
}

1 commentaires

Merci, jleggio. En fait, ce serait une ligne horizontale pour fournir la perception de la connexion comme Andy Hoffman l'a écrit ci-dessus

-1
votes

Je ne comprends pas vraiment la chose «entre» mais vous pouvez ajouter un:

li { border-left: 1px solid gray; border-right: 1px solid gray;

Comme je l'ai dit, je ne sais pas si c'est ce que vous voulez dire. :)

0 commentaires

1
votes

Vous pouvez également faire une simple coloration d'arrière-plan:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  background:
    linear-gradient(blue,blue) left  50px top 50%,
    linear-gradient(blue,blue) right 50px top 50%,
    linear-gradient(blue,blue) center;
  background-size:calc((100% - 4*50px)/3) 1px;
  background-repeat:no-repeat;
}

li {
  list-style-type: none;
  width: 50px;
  font-size:25px;
  text-align:center;
}

body {
 background:pink;
}

Et voici un moyen pour avoir de la transparence:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  background:linear-gradient(#ccc,#ccc)  center/100% 1px no-repeat;
}

li {
  list-style-type: none;
  background-color: white;
  padding: 20px;
  font-size:25px;
}

li:first-child {
  padding-left: 0;
}

li:last-child {
  padding-right: 0;
}

0 commentaires