如何创建一个1.1，1.2 1.3 ... HTML列表？ [英] How to create a 1.1, 1.2 1.3 ... HTML list?

问题描述

我要创建具有以下格式的HTML嵌套列表：

  1 
 1.1 
 1.2 
 1.3 
 1.4 
 2 
 2.1 
  

我尝试了一个在互联网上找到的解决方案：

  OL {counter-reset：item} 
 LI {display ：block} 
 LI：before {content：counters（item，。）; counter-increment：item} 
  

但它对我来说无效。
任何帮助请??

如果计数器解决方案太复杂，是否有办法伪装嵌套列表效果，格式化看起来像一个真实的列表

需要完整的IE6支持

解决方案

这应该工作。这是一个糟糕的方法，但如果你必须支持IE6没有太多的选择。

 < ol> 
< li>< span> 1< / span>项目
< ol> 
< li>< span> 1.1< / span>项目< / li> 
< li>< span> 1.2< / span>项目< / li> 
< li>< span> 1.3< / span>项目< / li> 
< li>< span> 1.4< / span>项目< / li> 
< / ol> 
< / li> 
< li>< span> 2< / span>项目
< ol> 
< li>< span> 2.1< / span>项目< / li> 
< / ol> 
< / li> 
< / ol> 
  

使用css

  ol {list-style：none;} 
  

它有点。

 < ol> 
< li>< span> 1< / span>项目
< ol> 
< li>< span> 1.1< / span> < p>项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目< / p>< / li> 
< li>< span> 1.2< / span> < p>项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目< / p>< / li> 
< li>< span> 1.3< / span> < p>项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目< / p>< / li> 
< li>< span> 1.4< / span> < p> Item< / p>< / li> 
< / ol> 
< / li> 
< li>< span> 2< / span>项目
< ol> 
< li>< span> 2.1< / span>项目< / li> 
< / ol> 
< / li> 
< / ol> 
  

而css是

  ol {list-style：none;} 
 ol li span 
 {
 display：block; 
 float：left; 
 width：30px; 
} 
 ol li 
 {
 clear：both; 
 width：400px; 
 
} 
 ol li p 
 {
 float：left; 
 width：370px; 
 margin：0; 
 
} 
  

您可能需要调整宽度。

I want to create HTML nested lists that has the following format:

1  
   1.1  
   1.2  
   1.3  
   1.4   
2
   2.1

I tried a solution that I found on the internet:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

But it didnt work for me. Any help please??

If the counter solution is too complicated, is there a way to fake the nested list effect, by writing them manually but being sure that the formatting looks like a real list

---

EDIT

need full IE6 support

解决方案

This should work. It is a bad way to do this but if you MUST support IE6 not much choice.

      <ol>
        <li><span>1</span> Item
          <ol>
            <li><span>1.1</span> Item</li>
            <li><span>1.2</span> Item</li>
            <li><span>1.3</span> Item</li>
            <li><span>1.4</span> Item</li>
          </ol>
        </li>            
        <li><span>2</span> Item
          <ol>
            <li><span>2.1</span> Item</li>
          </ol>            
        </li>
      </ol>

with css

ol {list-style:none;}

After your comment I've redone it a bit.

  <ol>
    <li><span>1</span> Item
      <ol>
        <li><span>1.1</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.2</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.3</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.4</span> <p>Item</p></li>
      </ol>
    </li>            
    <li><span>2</span> Item
      <ol>
        <li><span>2.1</span> Item</li>
      </ol>            
    </li>
  </ol>

And the css would be

ol {list-style:none;}
ol li span
{
  display: block;
  float: left;
  width: 30px;
}
ol li
{
 clear:both;
 width: 400px;

}
ol li p
{
  float: left;
  width: 370px;
  margin: 0;

}

You may have to adjust the widths.

这篇关于如何创建一个1.1，1.2 1.3 ... HTML列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！