Question

enter image description here

图像显示了问题。我希望子弹列表与文本对齐，而不是缩进。

我猜这必须在css中修改，因为源是：

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

那么如何从这个公牛名单中删除左边的填充/边距？我试过margin: 0; padding: 0;没有成功

Answer 1

应用padding-left：0并将列表样式位置更改为

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

示例链接http://jsfiddle.net/vF5HF/

Answer 2

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

Answer 3

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

Answer 4

正如@NicolaPasqui所提到的，对于你的问题你应该使用：

ul {
  padding-left: 0
}

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

将list-style-position设置为 inside 时，项目符号中的项目符号。

与将其设置为外部不同，其子弹将在列表项<之外。

有一篇很棒的文章关于子弹样式我认为你可以从here中受益。

如何使子弹列表与css中的文本对齐？

4 个答案: