Question

在下面的代码中，我发现数字 1 与内容 DIY SMS Export V1.05已发布之间的空间有点宽，如何用CSS设置数字和内容之间的差距？

此外，该网页与IE 10.0和FireFox 21.0具有相同的UI，如下图所示。

enter image description here

但在IE 10.0兼容模式下，UI更改为以下图像。左边距增加了，为什么？

enter image description here

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
       li.A {
          list-style-type: decimal;
          font-weight: bold;
           margin-bottom:15px;          
        }

        li.B{
          list-style-type:upper-alpha;
          font-weight:normal;
          margin-top:4px;
          margin-bottom:4px;   

        }

        ol.C {

        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ol>
            <li class="A">DIY SMS Export V1.05 has been released
                <ol class="C">
                    <li class="B">Add the function to delete sms selected</li>
                </ol>
            </li>

            <li class="A">DIY SMS Export V1.04 has been released
                <ol class="C">
                    <li class="B">Add chinese language support</li>
                </ol>
            </li>
        </ol>  
    </div>
    </form>
</body>
</html>

Answer 1

在HTML5之前，在HTML4.01中，仅建议用户代理的默认CSS。列表中特别需要的缩进，特别是列表中的列表是在Firefox和IE中使用margin-left: 40px或padding-left: 40px实现的（我的意思是Netscape和IE ...）

因此，codepen中的灯光重置可以解决差异。

CSS

ol, ul, li {
  margin: 0;
  padding: 0;
}
ol, ul {
  margin-left: 20px;
}

设置ol列表项的间距

1 个答案: