web-dev-qa-db-fra.com

Ajouter une règle horizontale à chaque <li>

Pour ma liste <ul>, j'aimerais ajouter un <hr> après chaque élément d'une liste. Le résultat devrait ressembler à:

<ul class="mylist">
    <li>
        moooo!
        <hr width="40%">
    </li>
    <li>
        maaaaa!
        <hr width="40%">
    </li>
    ...
</ul>

C'est un mauvais style en ajoutant <hr> à chaque <li> donc je voudrais réfracter ceci en utilisant uniquement des CSS. Je ne peux pas utiliser:

.mylist > li: after{
    content: "<hr>"
}

comme contenu échapperait aux caractères.

Je fais aussi pas je veux utiliser jQuery:

$('.mylist').find('li').append('<hr width="40%">');

La question est donc de savoir comment ajouter <hr width="40%"> à chaque<li> d’une liste donnée à l’aide de css3 ?

htmlcsshtml5css3css-selectors
22
ProfHase85

solution jQuery

Je viens juste de réaliser que vous vouliez imbriquer l'élément hr dans la li avant de le fermer. Oui, il est parfaitement valide. Utilisez donc simplement append() et notez que vous ne pouvez pas le faire en utilisant uniquement CSS, car vous ne pouvez pas modifier DOM. en utilisant CSS, vous devez utiliser jQuery ou JS

jQuery("ul li").append("<hr />");

Démo

Solution CSS

Si vous n'avez pas besoin d'un élément supplémentaire ou si vous ne voulez pas d'une solution jQuery (comme vous le souhaitez)

Utiliser l'élément hr comme enfant direct de l'élément ul n'est pas un balisage valide. Vous pouvez plutôt utiliser un border-bottom pour chaque li qui se comportera de la même façon que le fait hr, toujours si vous voulez un moyen explicite de le faire, par exemple pour contrôler le width du séparateur sans changer la width de li que vous ne pouvez le faire comme ceci

Démo

ul li:after {
    content: "";
    display: block;
    height: 1px;
    width: 40%;
    margin: 10px;
    background: #f00;
}

Ici, je crée simplement un élément de niveau block virtuel, qui n’existe pas dans le DOM, mais qui remplit simplement les fonctions dont vous avez besoin. Vous pouvez simplement concevoir l'élément de la même manière que vous appelez une div normale. Vous pouvez également utiliser border avec ceci, mais pour garder la mince ligne horizontalement centrée, j’ai assigné height: 1px; et puis j’utilise margin pour espacer.

40
Mr. Alien

Je pense qu'il est préférable d'utiliser CSS pour cela. Par exemple, vous pouvez cesser d'utiliser la balise <hr> au lieu de cela:

<ul class="mylist">
    <li>
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

et ensuite avec CSS:

.mylist li { border-bottom: 1px solid black; }

Il existe également d'autres options. Par exemple, si vous souhaitez afficher la ligne horizontale uniquement pour certains éléments de liste, vous pouvez leur attribuer une classe et ajouter une règle CSS uniquement pour cette classe. comme ça:

<ul class="mylist">
    <li class="hr">
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

et CSS:

.mylist li.hr { border-bottom: 1px solid black; }
20
Farid Rn

Vous pouvez utiliser comme ceci: 

<ul>
   <li></li>
</ul>
<hr/>

C'est simple. Si vous avez imbriqué ul et li, vous utilisez li au lieu de <hr/> ou simplement <hr/> dans une balise <li></li>. Voir ci-dessous. C'est purement votre choix.

<ul>
  <li>
    <ul><li></li></ul>
  </li>
  <li style="height:1px;border:solid 1px #666"> </li> // or you can also use 
  <li><hr/></li>
  <li> 
    <ul>
      <li></li>
    </ul>
  </li>
</ul>
2
user240141

Insérer une Class qui crée un bottom-border: pour chaque <li>

<!--########## STYLE EACH li USING CLASS ##########-->
<style>
  .hr {
     width:40%;
     border-bottom:1px solid rgba(0,0,0,.7);
   }

</style>

<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
    -CONTENT-

</li>
<li class="hr">
    -CONTENT-
</li>
...

0
Dev_x7xClownx7x

Les balises dans le contenu ne sont pas autorisées et même si cela serait très trompeur ( css {content: "text"}, Comment puis-je ajouter des balises? )

Si vous pensez qu'il est erroné d'ajouter <hr> en HTML, il est erroné d'ajouter avec css (si cela est possible) ou js. IMHO a first Vous devriez essayer d’utiliser la bordure de <li> si le résultat ne sera pas celui attendu, ajoutez que <hr>

0
kwarunek