8

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

4 回答 4

23

您是否尝试过添加css：

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

工作的jsFiddle

于 2013-06-30T14:51:58.473 回答
3

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

我认为您有两个选择：使用list-style-position: inside和设置padding-left: 0（示例中的“内部”类）。list-style-position（这里的MDN 解释了 的用法）。或者您可以进行操作padding-left，直到它与您的段落文本对齐。

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

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

于 2013-06-30T15:03:25.763 回答
1

要将所有内容都移到左侧，请尝试以下操作：

ol, ol li { margin-left:0; padding-left:0; list-style-position:inside; }
于 2013-06-30T14:55:11.720 回答
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>

于 2017-05-11T07:14:47.637 回答