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 ?
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 />");
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
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.
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; }
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>
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>
...
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>