有序列表边距问题（一些与 IE7 相关）

Question

1. 我正在尝试创建一个 OL，它与上面的标题文本保持在同一边距线上； 将 margin-left 和 padding-left 设置为 0px 使其离我的 DIV 太远了（不知道为什么）， 所以我将它们都设置为 11px；但是在 IE7（使用 IE10 控制台）上，向左偏移大约 3px。

2. 另一个问题是我在这里找不到减少每个数字和文本之间内边距的解决方案。

这是我的代码：

<div id="container">
 <div id="left">
  <div id="marg">
  <p class="title">Title</p>
 <ol class="list">
   <li>aaa</li>
    <li>aaa<br>
        aaa<br>
        aaa
   </li>
 <li>aaa</li>
 </ol>
</div>
</div>
<br style="clear: left;" />
</div>

CSS：

#container {
    border: 1px solid #DCD7D4;
    width: 740px;
    min-height: 680px;
    position: relative;
    margin-left: auto;
    margin-right: auto;

}

#marg {
    margin: 10px;
}
.list {
    font-size: 15px;
    color: #000000;
    font-weight: normal;
    line-height: 21px;
    margin-top:0px;
    margin-bottom:8px;
    margin-left: 0px;
    padding-left: 11px;     
}

.title {
    font-family: tahoma,arial;
    font-size: 22px;
    color: #E25424;
    letter-spacing: 0em;
}

谢谢

Answer 1

我想你的两个问题都可以通过为每个 li 元素设置样式来解决。

你只需要给他们padding-left，这将是你的文本与数字的距离。

要将所有 OL 推到左侧，请使用向左填充，margin:0 到所有 OL

Answer 2

我会说问题出在您的 html 结构上。您不必在列表中使用 <br> 元素。您还需要某种重置来抵消各种默认浏览器样式。

HTML

<div>
   <h1>Title</h1>
     <ol>
       <li>aaa</li>
       <li>aaa
        <ul>
         <li>aaa</li>
         <li>aaa</li>
        </ul>
       </li>
      <li>aaa</li>
      <li>aaa</li>
     </ol>
 </div>

CSS

ol{
list-style-position: inside;
    margin: 0;
    padding: 0;
    margin-left: .5em;
}
ul{
    list-style-type: none;
    margin: 0; 
    padding: 0;
}
ol li{
    margin:0;
    padding:0;
}
ul > li{
    margin-left: 1em;
}

这是一个小提琴http://jsfiddle.net/Fxx2j/