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

Question

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

插图:

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 中删除默认的 padding-left(此缩进确保标记不会被推到列表之外)来自 li 应该可以工作:

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

JSFiddle