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

前端未结

关注

 4  1908

心在旅途

$\"enter$

The image demonstrates the problem. I want the bullet list to be aligned with the

相关标签:

4条回答

花落未央

2021-02-03 23:55
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/
0 讨论(0)
发布评论:

提交评论
- 加载中...

别那么骄傲

2021-02-03 23:55

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

0 讨论(0)

轮回少年

2021-02-03 23:55
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

臣服心动

2021-02-03 23:57

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

0 讨论(0)