J'essaie de remplir une liste verticale non ordonnée qui continue sur la ligne suivante chaque fois que la liste atteint la limite de longueur. Mais au lieu de simplement afficher l'élément suivant de la liste sur la ligne suivante, je veux l'élément de liste à casser et continuer comme ça:Essayer de diviser les éléments de la liste dynamiquement
Je ne veux pas le faire avec des colonnes, plutôt qu'il casse dynamiquement .
Peut-être quelque chose comme ça pour faire la liste horizontale et de créer votre propre liste de style-type personnalisé?
code:
<style>
ul {
list-style-type: none;
text-align: center;
width: 450px;
}
li {
display: inline;
}
li:before {
content: "\2022";
margin-right: 2px;
}
</style>
<ul>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
</ul>Vous pouvez utiliser css pour modifier la manière dont les éléments sont répertoriés.
Ex:
ul {
width: 250px;
display: inline-block;
}
li {
float: left;
margin-left: 20px;
}<html>
<body>
<ul>
<li>item 1</li>
<li>item 1 item 2</li>
<li>item 1 item 2 item 3</li>
<li>item n</li>
</ul>
</body>
</html>Les 'li' ne se brisent pas/s'enroulent au milieu de la phrase. – hungerstar
Que diriez-vous de donner à votre <ul> un ensemble de largeur max, puis donner à vos <li>display: inline; ne sont donc pas bloquer les éléments plus et envelopper comme vous voulez. Cependant, list-style-type ne fonctionnera plus sur les li, car ce sont des éléments en ligne. Vous pouvez toujours obtenir vos points rouges en travaillant avec des images d'arrière-plan, il semble que vous le fassiez déjà.
ul {
max-width: 220px;
list-style-type: disc;
}
ul li {
\t display: inline;
}<ul>
\t <li>Hey there this is a pretty long sentence</li>
\t <li>Hey there this is a pretty long sentence</li>
\t <li>Hey there this is a pretty long sentence</li>
\t <li>Hey there this is a pretty long sentence</li>
</ul>
\t
ce code que vous avez maintenant? –