Question

我发现ol的项目有左边距，但<p>This is first row</p>没有留下边距，因此这三行不能保持对齐。如何让它们左对齐？谢谢！

您可以在以下位置查看结果：

或在Dropbox中：

https://www.dropbox.com/s/nr4bb00sd80pgl9/Mycss.PNG

<%@ 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>
        <p>This is first row</p>
        <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

您是否尝试过添加css：

ol{ padding-left:0; list-style-position:inside; }

working jsFiddle

Answer 2

看看这个JS小提琴：http://jsfiddle.net/BPFQm/1/

我认为您有两个选择：使用list-style-position: inside并设置padding-left: 0（示例中的“内部”类）。（list-style-position的使用是explained on MDN here）。或者您可以操纵padding-left，直到它与您的段落文本对齐。

其他一些答案建议添加margin-left: 0，但我不确定是否有必要。在我的小提琴当然没有必要。

更新：再次查看我制作的JS Fiddle，您会看到两种方法之间的重要区别，这两种方法会显示/当您的列表项跨越多行时。如果您使用list-style-position: inside，则后续行将与数字/标签齐平;而更改左边距保持标准格式，其中文本在数字/标签的右侧有自己的边距。我想，请选择您喜欢的格式。

Answer 3

要将所有内容一直放到左侧，请尝试以下操作：

ol, ol li { margin-left:0; padding-left:0; list-style-position:inside; }

Answer 4

默认情况下，所有ol/ul标记都有一些左边的填充。你可以删除那个填充然后就可以了。

ol, ul { 
  padding-left: 0; 
  list-style-position: inside; 
}

检查下面的代码段

＆＃13;

ol, ul { 
  padding-left: 0; 
  list-style-position: inside; 
}

＆＃13;

<ol>
  <li>list-item</li>
  <li>list-item</li>
  <li>list-item</li>
  <li>list-item</li>
  <li>list-item</li>
</ol>

<ul>
  <li>list-item - 1</li>
  <li>list-item - 2</li>
  <li>list-item - 3</li>
  <li>list-item - 4</li>
  <li>list-item - 5</li>
</ul>

＆＃13;

ol li有左边距，不能左对齐

4 个答案: