如何将我的有序列表项与 <p> 元素对齐

问题描述 投票：0回答：4

我发现

ol
的项目有左边距，但
<p>This is first row</p>
没有左边距，所以这三行不能左对齐。我怎样才能让它们左对齐？

<!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>

html css html-lists
4个回答
27
投票

您是否尝试过添加CSS：

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

工作 jsFiddle

4
投票

看看这个 JS Fiddle：http://jsfiddle.net/BPFQm/1/

我认为你有两个选择：使用 

list-style-position: inside
并设置 
padding-left: 0
（示例中的“内部”类）。 （
list-style-position
的用法在 MDN 上有解释）。或者您可以操纵 
padding-left
直到它与您的段落文本对齐。

其他一些答案建议添加

margin-left: 0
，但我不确定这是必要的。这在我的小提琴中当然没有必要。

更新：看看我再次制作的JS Fiddle，你会发现这两种方法之间的一个重要区别，当/如果你的列表项跨越多行时，它就会显示出来。如果您使用 

list-style-position: inside
那么后续行将与数字/标签齐平；而更改左侧填充会保持标准格式，其中文本在数字/标签的右侧有自己的边距。我想，选择您喜欢的格式。

1
投票

要将所有内容全部移至左侧，请尝试以下操作：

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

默认情况下，所有 

ol/ul
标签从左侧都有一些填充。您可以删除该填充然后它就可以工作了。

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

检查下面的片段

ol, ul { 
  padding-left: 0; 
  list-style-position: inside; 
}
<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.