CSS / HTML：创建具有嵌套列表的有序列表，该列表全部对齐，但文本必须是平方的

时间：2015-06-05 07:37:26

标签： html css

我有一个标题列表，每个标题都有一个嵌套列表。这些列表有一个数字的增量作为项目符号点，我想确保包括嵌套列表在内的所有内容都一直向左对齐。然后，我想确保文本与文本的其余部分对齐，而不是在启动新行时，它会一直向下到达项目符号下方的左侧。

以下示例更容易理解。这是我到目前为止： enter image description here

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

正如您可以看到从第1.1点开始，新行上的文本会回到远处，我想尝试将其设置为与点的开头一致。

以下是我的目标： enter image description here

事实证明这很困难，并且提前感谢任何回复某些答案的人。

3 个答案:

答案 0 :(得分：3)

您是否可以将<span>添加到其他<li>中？如果是，这将是一种方法：

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

  

零个或多个li和script-supporting元素。

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

答案 2 :(得分：0)

我有一种方法可行，无需添加所有这些跨度：

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>
相关问题
最新问题