我发现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>
答案 0 :(得分:17)
答案 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;
}
检查下面的代码段
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;