CSS/HTML：创建嵌套列表的有序列表，所有内容都左对齐，但文本必须是方形的。

Question

CSS/HTML：创建嵌套列表的有序列表，所有内容都左对齐，但文本必须是方形的。

3

我有一个标题列表，每个标题下面都有一个嵌套的列表。这些列表以数字递增作为项目符号，我希望确保包括嵌套的列表在内的所有内容都对齐到最左边。然后，我想确保文本与其他文本对齐，而不是当新行开始时，在项目符号下方全部靠左。

下面的示例更容易理解。这是我目前的情况： enter image description here

/* 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点看到的那样，当文本跨越到新的一行时，它会回退得太远，我想尝试将其与该点的起始处对齐。

这是我的目标： enter image description here

这证明是困难的，提前感谢任何给出答案的人。

- Dom Bryan

3个回答

1

目前您的HTML无效。 ol 元素的唯一有效直接子元素是：

零个或多个 li 和支持脚本元素。

http://www.w3.org/TR/html5/grouping-content.html#the-ol-element

现在您有更多的ol元素作为父级ol元素的子级。它们应该在您的li项内。请参见下面：

<ol>
  <li>
    <h1>TITLE ONE</h1>
    <ol class="contents">
      <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.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.</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>
  <li>
    <h1>TITLE TWO</h1>
    <ol>
      <li>text 2 one</li>
      <li>text 2 two</li>
      <li>text 2 three</li>
      <li>text 2 four</li>
    </ol>
  </li>
  <li>
    <h1>TITLE THREE</h1>
    <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>
  </li>
</ol>

解决方案：

现在样式更容易设置，因为您可以针对li > h1和li > ol进行定位。

- jcuenod

我很想看看你的HTML代码，因为我有些困惑，我确实有li元素。 - Dom Bryan

@DomBryan 有意义吗？ - jcuenod

我现在明白了，谢谢你纠正我。如果可以再问你一件事情，你能否看一下我的CSS，并帮我看看如何修改它以适应这个要求？ - Dom Bryan

我看到另一个答案正在修复并已经给你了。 - jcuenod

是的，我有答案了。非常感谢您的建议，真的很棒。 - Dom Bryan

0

我有一种不需要添加所有这些span就能工作的方法：

http://jsfiddle.net/qGCUk/1083/

抱歉CSS的丑陋 - 我匆忙完成了它 :)

CSS：

OL { counter-reset: item; }
LI { display: block; }
LI:before { content: counters(item, ".") " "; 
    counter-increment: item;
}
li{
    position:relative;
}
ol li ol li{
    padding-left:10px;
    margin-left:10px;
}
ol li ol li::before{
    content: counters(item, ".") " "; 
    counter-increment: item;
    position:absolute;
    left: -30px;
}

HTML：

 <ol>
  <li>one</li>
  <li>two
  <ol>
   <li>two.onesjidasjdioasjdiosajdiosa jdioasjdioasjdisaojdoiasjdoisajd oiasjdioasjdiojasidojs aiodjsaiodjsaoidjsaoidjosiadjoisajdiosajdoiasjdioasjdiosajdiosajdiosajiod</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol>
   <li>three.one</li>
   <li>three.two</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>four</li>
  </ol>

- noa-dev

这很有帮助，但它缺少了所有左对齐的重要部分，就像约纳斯在顶部的答案一样。 - Dom Bryan

据我所理解，您的问题是第二行在计数器下面->通过我的示例，该问题已得到解决 :=) - noa-dev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonas Grumann · Accepted Answer

你能否也给其他的<li>元素添加<span>标签呢？如果可以，以下是一种实现方式：

/* Numbered lists like 1, 1.1, 2.2.1... */
/* 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 span, li {
    display: block;
    overflow: hidden;
}

li:before {
 display: block;
 position: relative;
 content: counters(item, ".") ".";
 float: left;
}
ol > li {
 counter-increment: item;
 
}
ol li:before {
    
 width: 50px;
}

<!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
     <ol class="contents">
      <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris qu</span></li>
      <li><span>Lorem ipsum dolor sit amet, conse</span></li>
      <li><span>Lorem ipsum dolor sit amet, consectetur a</span></li>
      <li><span>Lorem ipsum dolor sit am</span>
       <ol>
        <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis auguesit amet enim uetur.</span></li>
       </ol>
                        </li>
     </ol>
                </li>
    <li>TITLE TWO
     <ol>
      <li>text 2 one</li>
      <li>text 2 two</li>
      <li>text 2 three</li>
      <li>text 2 four</li>
     </ol>
                </li>
    <li>TITLE THREE
     <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>
                </li>
   </ol>
 </body>
</html>