web-dev-qa-db-fra.com

Comment aligner une liste à puces avec du texte en css?

enter image description here

L'image montre le problème. Je veux que la liste à puces soit alignée sur le texte et non en retrait.

Cela doit être modifié en 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/marge de gauche dans cette liste de taureaux? J'ai essayé margin: 0; padding: 0; n'a pas fonctionné

csslist
20
Karem

Appliquez padding-left: 0 et changez la position du style de liste en dedans

ul  {
 padding-left:0;   
}
ul li  {
 list-style-position:inside
}

Exemple de lien http://jsfiddle.net/vF5HF/

45
NicolaPasqui
ul {
    margin-left: 0;
    padding-left: 0;
}
li {
    margin-left: 1em;
}
18
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: "\2713";
            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>
2
nico

Comme @NicolaPasqui a mentionné, pour votre problème, vous devriez utiliser:

ul {
  padding-left: 0
}

ul li {
  list-style-position: inside;
}

Lorsque vous définissez list-style-position sur inside, la puce sera inside dans l'élément de liste. 

 enter image description here

Contrairement à la configuration sur en dehors de, où la puce sera en dehors de l'élément de liste.

 enter image description here

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

0
Nesha Zoric