Comment faire une liste à puce aligner avec le texte en css?

L'image illustre le problème. Je veux la liste à puce pour être aligné avec le texte, pas en retrait.

Ce qui doit être modifié dans le css, je suppose, parce que la source est:

            <p>This is a test :)</p>

<ul>

<li>Test1</li>

<li>Test2</li>

<li>Test3</li>

<li>Test4</li>

</ul>

<p><strong>Bla bla</strong></p>

<p><strong>Dette er en test</strong></p>

<p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p>

<p><strong>Dette er en test</strong></p>

<p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p>
        </div>

Alors, comment puis-je supprimer le remplissage/de la marge de gauche dans ce taureau liste? J'ai essayé margin: 0; padding: 0; n'a pas fonctionné

InformationsquelleAutor Karem | 2011-09-22

css list

46

Appliquer padding-left:0 et changer le style de liste de la position à l'intérieur de
```
ul  {
 padding-left:0;   
}
ul li  {
 list-style-position:inside
}
```
Exemple de lien http://jsfiddle.net/vF5HF/
- Gardez à l'esprit list-style-position:inside fera en sorte que la balle est essentiellement dans le texte, donc, si votre texte passe la balle ne sera pas séparé le texte. Elle est plutôt pas mal si vous me demandez.
- Il demande à un non-idented, texte aligné à la liste...il a l'air assez mauvais, mais c'est ce qu'il cherche 😉
InformationsquelleAutor NicolaPasqui
18
```
ul {
    margin-left: 0;
    padding-left: 0;
}
li {
    margin-left: 1em;
}
```
- Cette réponse sera généralement mieux qu'il continue de texte dans un élément de liste qui s'étend sur plusieurs lignes alignées.
InformationsquelleAutor Dennis Traub

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Bullet alignment</title>
    <style type="text/css">
        body { font-size: 14pt; margin: 100px; background-color: #f2f2f2; }
        ul { margin-left: 0; padding-left: 2em; list-style-type: none; }
        li:before {
            content: "13";
            text-align: left;
            display: inline-block;
            padding: 0;
            margin: 0 0 0 -2em;
            width: 2em;
        }
    </style>
</head>
<body>
<p>Bullet alignment &#x1F608;</p>
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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>Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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>
</ul>
<p>That’s all Folks</p>
</body>

C'est la meilleure réponse ici. Le seul changement que je voudrais faire est d'utiliser le contenu: "\2022" avec font-weight: bold depuis l'OP a demandé de balles.

InformationsquelleAutor nico

0

Comme @NicolaPasqui mentionné, pour votre problème, vous devez utiliser:
```
ul {
  padding-left: 0
}

ul li {
  list-style-position: inside;
}
```
Lors de la configuration list-style-position à à l'intérieur de, la balle sera à l'intérieur de l'élément de liste.

Contrairement à à l'extérieur, où la balle sera à l'extérieur de l'élément de liste.

Il y a un excellent article sur style de puce je pense que vous pourriez bénéficier de ici.

InformationsquelleAutor Nesha Zoric

Vous devez vous connecter pour publier un commentaire.