Texte aligner un élément de liste non ordonnée

Je me demandais si il y avait moyen de rendre le texte d'une liste non ordonnée point d'apparaître comme une "colonne" par le côté du disque standard/dot élément de la liste d'icône? Fait une paire de captures d'écran:

C'est à quoi il ressemble quand l'aide d'une liste non ordonnée avec un peu de texte à l'intérieur de l'élément de liste (li):

Et ce est la façon dont je veux qu'il regarde:

Texte aligner un élément de liste non ordonnée

Est-ce possible sans une image/div hacks? 😉 J'ai cherché partout pour voir si il n'y a aucune norme CSS réglage pour elle, mais je n'arrivais pas à en trouver.

Merci beaucoup d'avance!

Tout le meilleur,

Partagez votre code
hé maintenant, vérifiez pour cela, je pense que vous voulez que ce tinkerbin.com/8DhTi5M2
d'ohh!! J'ai eu ce paramètre sur mon ul: list-style-position:inside; Retrait qui a fait la différence 😉

OriginalL'auteur bomortensen | 2012-07-04

Vous pouvez simplement le code comme ceci:

HTML

  <ul>
    <li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>

CSS

ul{
  margin:0;
  padding:0 20px;
} 
ul li    {
  padding:0;
  width:150px;
  background:red;
  margin:10px 0;
}

Grâce Rohit, j'ai trouvé la faille dans mon css (désolé pour ne pas le partager, de première main) - voir mon commentaire à mon post 😉 l'Ajout d'une largeur sur le li est une excellente idée btw. Merci encore! 🙂

OriginalL'auteur Rohit Azad

7

list-style-position est la propriété que vous recherchez. Il fonctionne dans tous les navigateurs. (voir MDN pour plus de détails)
```
ul {
   list-style-position: outside;
   /* You may want to add an additional padding-left: */
   padding-left: 1.5em;
}
```
Mais en fait outside c'est la valeur par défaut. Vous avez probablement écraser quelque part d'autre.

Je pense que c'est la meilleure solution, de cette façon il n'y a pas besoin de donner une largeur fixe, les éléments qui la plupart du temps n'est pas possible de toute façon.

OriginalL'auteur KevinH
3

Je pense flottants les éléments de la liste à la gauche, c'est la meilleure solution pour les faire apparaître comme des colonnes.

Ce code CSS peut vous aider à:
```
<style type="text/css">
    ul > li {
        margin: 0 10px;
        width: 150px;
        float: left;
    }
</style>
```
OriginalL'auteur
0

Il suffit juste d'utiliser le texte de l'entourent avec open(<li>) et fermé(</li>) balises en vertu de <ul> tag.

Par exemple,
```
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
    <li>This is list item - 2</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
    <li>This is list item - 4</li>
</ul>
```
Sortie sera,
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- C'est l'élément de la liste - 2
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
- C'est l'élément de la liste - 4
OriginalL'auteur Sakthivel
-1

Ajouter cette
```
ul {
  display:inline-block;
}
```
à votre code css.

Cela ne fonctionne pas

OriginalL'auteur poepje

Vous devez vous connecter pour publier un commentaire.