Ajouter une règle horizontale à chaque
Mon <ul> liste, je voudrais ajouter un <hr> après chaque élément d'une liste. Le résultat doit être rendu comme:
<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 cela en utilisant uniquement css. Je ne peux pas utiliser:
.mylist > li: after{
content: "<hr>"
}
Comme le contenu échapperait aux caractères.
Je fais aussi Pas veulent utiliser jQuery:
$('.mylist').find('li').append('<hr width="40%">');
, Donc la question est, comment pourrais-je ajouter <hr width="40%"> à chaque <li> d'une certaine liste à l'aide de css3 ?
5 réponses
Solution jQuery
Vient de réaliser que vous vouliez imbriquer l'élément hr dans le li avant de le fermer, Oui c'est parfaitement valide, alors utilisez simplement append(), et notez que vous ne pouvez pas le faire en utilisant CSS uniquement, 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 de solution jQuery (comme vous envie)
Utiliser hr element comme enfant direct à ul element n'est pas un balisage valide, à la place, vous pouvez utiliser un border-bottom pour chaque li qui se comportera comme le fait hr, toujours si vous voulez un moyen explicite de le faire, disons pour contrôler le width du séparateur sans changer le width de li que vous 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 juste un élément de niveau block virtuel, qui n'existe pas réellement dans le DOM, mais il fera juste la chose dont vous avez besoin. Vous pouvez simplement concevoir l'élément, de la même manière que vous stylisez un div normal. Vous pouvez également utiliser border sur cela, mais pour garder la ligne mince horizontalement centrée, j'ai assigné height: 1px; et que j'utilise margin pour espacer.
Je pense qu'il vaut mieux utiliser CSS pour cela. par exemple, vous pouvez arrêter d'utiliser la balise <hr>, à la place faire quelque chose comme:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
Et puis 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 donner une classe et ajouter une règle CSS uniquement pour cette classe. comme ceci:
<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, puis vous utilisez li au lieu de <hr/>, ou simplement <hr/> dans a <li></li> balise. Voir ci-dessous. Son seul de 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>
Les balises dans le contenu ne sont pas autorisées et même si cela serait très trompeur ( css { content: "text"}, comment ajouter des balises?)
Si vous pensez qu'il est faux d'Ajouter <hr> en HTML qu'il est faux d'ajouter avec css (si cela serait possible) ou js. IMHO a d'abord, vous devriez essayer d'utiliser la bordure de <li > si le résultat ne sera pas comme prévu ajouter que <hr>
Insérer Un Class, Ce 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>
...