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;"&开发者_JS百科gt;<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
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/
ul {
margin-left: 0;
padding-left: 0;
}
li {
margin-left: 1em;
}
<!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 😈</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>
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.
Unlike setting it to outside, where the bullet will be outside the list item.
There is a great article about bullet style I think you could benefit from here.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论