La deuxième ligne dans li commence sous la puce après CSS-reset

Question

J'ai des problèmes avec mon ul -après l'application de CSS-reset.

Lorsque le texte dans le li est long et qu'il passe à une deuxième ligne, le texte commence sous la puce. J'aimerais qu'il commence avec la même marge/le même interligne que le texte à droite de la puce.

C'est un peu difficile à expliquer, mais si vous regardez l'image d'exemple. L'image de gauche est la liste d'aujourd'hui. "motta varsel [...]" commence sous la puce, mais j'aimerais qu'elle ressemble à l'image de droite.

Comment puis-je faire cela avec CSS ? Je suppose qu'il y a quelque chose de très simple que j'ai négligé, mais je n'arrive pas à trouver ce que c'est. Les recherches sur Google n'ont rien donné d'utile non plus.

Answer 1

En li possède une propriété appelée list-style-position . Vos puces peuvent ainsi se trouver à l'intérieur ou à l'extérieur de la liste. Par défaut, il est fixé à inside . Le texte s'enroule alors autour de lui. Si vous le réglez sur outside , le texte de votre li seront alignées.

L'inconvénient est que vos puces ne seront pas alignées sur le texte à l'extérieur de la zone de texte. ul . Si vous souhaitez l'aligner sur le reste du texte, vous pouvez utiliser une marge.

ul li {
    /*
     * We want the bullets outside of the list,
     * so the text is aligned. Now the actual bullet
     * is outside of the list’s container
     */
    list-style-position: outside;

    /*
     * Because the bullet is outside of the list’s
     * container, indent the list entirely
     */
    margin-left: 1em;
}

---

Editer le 15 mars 2014 Étant donné que les internautes continuent à utiliser Google, j'ai pensé que la réponse initiale pouvait être améliorée.

• Le bloc de code a été modifié pour fournir juste la solution
• L'unité d'indentation a été remplacée par em 's
• Chaque propriété est appliquée au ul élément
• Bons commentaires :)

Answer 2

Voici un bon exemple -

ul li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

Démonstration de travail : http://jsfiddle.net/d9VNk/

Answer 3

Je suis d'accord avec la réponse de Dipaks, mais souvent l'indentation du texte suffit car vous pouvez ou non positionner l'ul pour un meilleur contrôle de la mise en page.

ul li{
text-indent: -1em;
}

Answer 4

Je placerais le poisson dans un :before en css. Vous avez également une faute d'orthographe dans votre HTML. Il devrait s'agir de <ul> . Font Awesome devrait vous donner le code à mettre dans content .

li {
      padding: 0% 0% 5% 3%; 
      width: 100%;
    list-style-position: outside;
    position: relative;
    }

    li:before {
        content: '';
        position: absolute;
        width: 5px;
        height: 5px;
        background: black;
        top: 10px;
        left: -5px;
    }

<div class="col">

        <ul>
          <p class="col align-self-center">
          <li>5% marketing and strategic alliances</li> 
          <li>10% Metadata release (Rarity tools) Focus on community growth</li>
          <li>25% Listing in Magic Eden</li> 
          <li>50% First Donation to partners</li> 
          <li>65% Increase in marketing investment</li> 
          <li>80% Bluepaper Publication of Phase 2</li> 
          <li>100% Second Donation to partners</li> 
          </p>
        </ul>
      </div>

    </div>