从无序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

删除默认的padding-left(这缩进确保标记不会在名单之外推)从ul和自定义padding自li应工作:

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

的jsfiddle