Question

我正在尝试创建一个OL，它与上面的标题文本保持相同的边距线; 设置margin-left和padding-left为0px从我的DIV中取出太远（不知道为什么），所以我把它们都设置为11px;但是在IE7（使用IE10控制台）时，左侧偏差约为3px。
另一个问题是我在这里找不到减少每个数字和文本之间内边距的解决方案。

这是我的代码：

<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;
}

both problems illustrated

感谢

Answer 1

我猜你的两个问题都可以通过给每个li元素赋予样式来解决。

你只需要给他们填充左边，这将是你的文字与数字的距离。

要将所有OL推向左侧，请使用边距左边的填充：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/

有序列表边距问题（有些是IE7）

2 个答案: