web-dev-qa-db-fra.com

Point de Li sur deux lignes. Deuxième ligne sans marge

Je travaille actuellement sur une liste non ordonnée contenant des éléments de liste avec des slogans. J'ai un problème concernant un élément de la liste, qui est suffisamment long pour prendre deux lignes (voir image)

 enter image description here

Je le veux pour que la deuxième ligne soit alignée avec la première ligne. C'est le code HTML que j'utilise. J'ai utilisé fontAwesome pour les images de contrôle.

ul {
  width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

J'ai déjà essayé d'entrer plusieurs &nbsp; entre "2" et "lignes", mais cela me semble être une très mauvaise pratique. J'espère que quelqu'un pourra m'aider avec ce problème.

htmlcsshtml-listsfont-awesome
14
Kevin Groen

Cela est dû au fait que la coche est un contenu en ligne et que, dès que le texte est renvoyé à la ligne, il continue de circuler normalement.

Vous pouvez arrêter ce problème en tirant parti de text-indent:

La propriété text-indent spécifie la quantité d'espace horizontal devant rester avant le début de la première ligne du contenu textuel d'un élément.

text-indent ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent )

En fournissant un text-indent négatif, vous pouvez indiquer à la première ligne de décaler le montant souhaité vers la gauche. Si vous spécifiez ensuite un padding-left positif, vous pouvez annuler ce décalage.

Dans l'exemple suivant, la valeur 1.28571429em est utilisée car il s'agit de la variable width définie sur le .fa-fw par font-awesome.

ul {
  width: 300px;
}
li {
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
    <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

24
Hidden Hobbes

vous pouvez simplement ajouter ceci à votre ul:

ul {
text-indent:-20px; 
margin-left:20px;
}

JSFIDDLE

5
Alvaro Menéndez

Vous pouvez supprimer la vérification du flux de pages en les définissant avec position:absolute

ul {
  width: 300px;
}
.fa-fw {
  position: absolute;
  left: -22px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul custom-list">
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

3
Danield

Vous pouvez utiliser "display: table" comme style pour li et créer une étendue avec le style "display: table-cell". Ou créez la classe correspondante. Comme ça:

<li style="display:table"><span style="display:table-cell">text with 
all lines indented</span></li>
2
Hanna Howz

vous pouvez mettre votre texte dans un div et donner float:left à vos li et div intérieurs.

1
Majid Sadr
ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}

ajouter un rembourrage et un retrait de texte - qui déplace le texte du li: before.

0
m b k