CODEWITHSUNDEEP
csslist
Karem
Karem

Reputation: 18103

How to make a bullet list align with text in css?

enter image description here

The image demonstrates the problem. I want the bullet list to be aligned with the text, not indented.

This must be modified in css i guess, because source is:

            <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>

So how can I remove the padding/margin from left in this bull list? I tried margin: 0; padding: 0; did not work out

Upvotes: 40

Views: 86964

Answers (4)

NicolaPasqui
NicolaPasqui

Reputation: 1120

Apply padding-left: 0 and change the list style position to inside:

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

Example link http://jsfiddle.net/vF5HF/

Upvotes: 60

Nesha Zoric
Nesha Zoric

Reputation: 6620

As @NicolaPasqui mentioned, for your problem you should use:

ul {
  padding-left: 0
}

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

When setting list-style-position to inside, the bullet will be inside the list item.

enter image description here

Unlike setting it to outside, where the bullet will be outside the list item.

enter image description here

There is a great article about bullet style I think you could benefit from here.

Upvotes: 2

nico
nico

Reputation: 1332

<!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>

Upvotes: 4

Dennis Traub
Dennis Traub

Reputation: 51624

ul {
    margin-left: 0;
    padding-left: 0;
}
li {
    margin-left: 1em;
}

Upvotes: 25

Related Questions