从无序列的 HTML 列表中删除缩进

Question

div.content 包含 ul.searchlist 和两个 lis（带有 白色背景的区域）在左侧没有完全对齐，因为它有一些额外的间距（带有 红色背景），我不知道是什么导致它出现以及如何删除它。

插图：

HTML：

<div id="body-content">
   <h1>Title of</h1>
   <div class="content">
      <p style="margin:0;">Subtitle</p> 
      <ul class="searchlist">
         <li>
            <img src="" title="result" width="110px"/>
            <a href="#">This is a post for  testing CSS</a>
         </li>
         <li>
            <img src="" title="result" width="110px"/>
            <a href="#">This is a post for  testing CSS</a>
         </li>
      </ul>
   </div>
</div>

CSS：

#body-content{ float:left; width:700px;background:yellow; }
.content .searchlist{ float:left; width:700px; list-style:none; margin:15px 0 0 0; background:red; }
.content .searchlist li{ padding:10px; float:left; width:688px; background:#fcfcfc; margin-bottom:6px; }
.content .searchlist li img{ float:left; margin-right:10px; }
.content .searchlist li a{ font:bold 18px Arial, Helvetica, sans-serif; color:#666; }

JSFiddle

Answer 1

从ul 中删除默认padding-left（此缩进确保标记不会被推到列表之外）和从li 中自定义padding 应该可以工作：

.content ul.searchlist { padding-left : 0; }
.content ul.searchlist li { padding : 10px 0; }

JSFiddle

Answer 2

我认为您应该在其他代码之前重置默认样式表。这是最佳实践。例如下面：

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;
}
/* HTML5 reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 3

您正在寻找 list-style-type: 而不是 list-style:，然后您需要将其设置为 margin 和 padding 为 0，或者 w/p>

.content .searchlist {
    float: left;
    width: 700px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: red;
}

JSFiddle Example

Answer 4

opera next、chrome、safari 和 webkit 似乎都在左侧添加了40px of padding：

来源：

ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

修复：

#body-content > div > ul {padding-left:0;}

Answer 5

试试这个：

.content .searchList {
   padding-left: 0px;
}

ul 元素默认以padding 开头。

Answer 6

将padding 设置为0：

.content .searchlist {
   background: none repeat scroll 0 0 #FF0000;
   float: left;
   list-style: none outside none;
   margin: 15px 0 0;
   width: 700px;
   padding: 0;
}