Question

我正在为移动网站制作动态HTML列表。基本概念有效，但我想删除列表侧面的间距。我尝试使用margin-left和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>（如您所见，主要是从父<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;
}

删除HTML列表上的缩进

3 个答案: