sur le texte?'/> sur le texte?'/> sur le texte?'/> Comment puis-je centrer les puces d'un <ul> sur le texte? | abulletproofidea.com

Question Comment puis-je centrer les puces d'un
    sur le texte?


Quand j'essaie de centrer un <ul> le texte dans le <li> centres mais les puces restent à l'extrême gauche de la page. Y a-t-il un moyen d'obtenir les points de la puce pour rester avec le texte quand il est centré?

#abc{text-align: center; }

<div id="section1">
<div id="abc">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div/>
<div/>

12
2018-03-11 01:59


origine


Réponses:


Ajouter list-style-position: inside  au ul élément. (Exemple)

La valeur par défaut pour le list-style-position propriété est outside.

ul {
    text-align: center;
    list-style-position: inside;
}
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

Une autre option (qui donne des résultats légèrement différents) serait de centrer ul élément:

.parent {
  text-align: center;
}
.parent > ul {
  display: inline-block;
}
<div class="parent">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>


20
2018-03-11 02:02



Vous pouvez le faire avec list-style-position: inside; sur le ul élément:

ul {
    list-style-position: inside;
}

Voir le violon de travail


10
2018-03-11 02:02



J'ai trouvé la réponse aujourd'hui. Peut-être que c'est trop tard mais je pense que c'est beaucoup mieux. Vérifier celui-ci https://jsfiddle.net/Amar_newDev/khb2oyru/5/

Essayez de changer le code CSS: <ul> max-width:1%; margin:auto; text-align:left; </ul>

largeur max: 80% ou quelque chose comme ça.

Essayez d'expérimenter vous pourriez trouver quelque chose de nouveau.


1
2018-06-11 04:38