css - 删除 HTML 列表上的缩进

Question

我正在为移动网站制作动态 HTML 列表。基本概念有效，但我想删除列表一侧的间距。我已经尝试过margin-leftand padding-left，但它仍然不起作用。

例子 ：

/* Now */
    List1
    List2
    List3

/* And I want */
List1
List2
List3

Answer 1

Safari 上的计算样式<ul>

display: block;
font-family: 'Lucida Grande', Arial, Helvetica;
font-size: 12px;
height: 30px;
list-style-type: disc;
margin-bottom: 12px;
margin-left: 0px;
margin-right: 0px;
margin-top: 12px;
padding-bottom: 0px;
padding-left: 40px;
padding-right: 0px;
padding-top: 0px;
width: 795px;

对于<li>（如您所见，主要是从 parent 继承的<ul>）

display: list-item;
font-family: 'Lucida Grande', Arial, Helvetica;
font-size: 12px;
height: 15px;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: -webkit-auto;
width: 795px;

左填充（也继承）；

padding-left: 40px;

将其设置为更低的值：

padding-left: 0px;

Answer 2

听起来您需要padding从列表项的容器（ul或ol）中删除menu：

ul {
    padding-left:0;
}

Answer 3

只需从 ul 中删除填充：

  ul {padding-left:0}

我想这可能意味着你还没有设置 css 重置，把它放在你的 css 文件的顶部：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}