有序列表的边距问题（某些是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推到左侧，请在所有OL上使用距margin：0的左侧填充

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/