我有一个标题列表,每个标题下面都有一个嵌套的列表。这些列表以数字递增作为项目符号,我希望确保包括嵌套的列表在内的所有内容都对齐到最左边。然后,我想确保文本与其他文本对齐,而不是当新行开始时,在项目符号下方全部靠左。
下面的示例更容易理解。这是我目前的情况:
下面的示例更容易理解。这是我目前的情况:
![enter image description here](https://istack.dev59.com/0TKUm.webp)
/* Numbered lists like 1, 1.1, 2.2.1... */
ol {
counter-reset: item;
padding: 0;
margin: 0;
margin-left: 20px !ie7;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li:before {
display: block;
position: relative;
content: counters(item, ".") ".";
}
ol > li {
counter-increment: item;
}
ol li:before {
display: inline-block;
width: 50px;
}
ol ol > li:before {
}
ol li li:before {
width: 70px;
}
ol li li li:before {
width: 90px;
}
ol li li li li:before {
width: 110px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css">
<title>Page Title</title>
</head>
<body>
<ol class="heading">
<li>TITLE ONE</li>
<ol class="contents">
<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</span></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur.</li>
</ol>
</ol>
<li>TITLE TWO</li>
<ol>
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
<li>TITLE THREE</li>
<ol>
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
<li>text 3 five</li>
<li>text 3 six</li>
</ol>
</ol>
</body>
</html>
正如您从1.1点看到的那样,当文本跨越到新的一行时,它会回退得太远,我想尝试将其与该点的起始处对齐。
这是我的目标:
这证明是困难的,提前感谢任何给出答案的人。