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

时间:2013-06-30 14:48:48

标签: css

我发现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>

4 个答案:

答案 0 :(得分:17)

您是否尝试过添加css:

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

working jsFiddle

答案 1 :(得分:3)

看看这个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,则后续行将与数字/标签齐平;而更改左边距保持标准格式,其中文本在数字/标签的右侧有自己的边距。我想,请选择您喜欢的格式。

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

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

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

检查下面的代码段

&#13;
&#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;
&#13;
&#13;