Question

我想在HTML

中使用list进行以下操作

The following are the properties:
  (1) blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
      blahblahblahblah
  (2) blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
      blahblahblahblah

如果我使用list-style-type作为小数，我会像

一样

The following are the properties:
  1. blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
     blahblahblahblah
  2. blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
     blahblahblahblah

我可以使用list或通过任何其他方式实现前者吗？

修改

使用Boltclock对我使用的How to set the li style??的回答：

ol.d {
    counter-reset: item;
}

ol.d li:before {
    content: '(' counter(item) ') ';
    counter-increment: item;
}

<ol class="d">
  <li>blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
      blahblahblahblah</li>
  <li>blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
      blahblahblahblah</li>
</ol>

我得到的结果如下：

The following are the properties:
  (1) blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
  blahblahblahblah
  (2) blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
  blahblahblahblah

现在我想缩小第二行。我怎样才能做到这一点？

Answer 1

我想出了一个使用浮动的解决方法，但它非常脆弱并依赖于您将拥有的实际列表项数。数字越多，您需要增加的利润就越多。更不用说它取决于你使用的字体。

ol.d {
    counter-reset: item;
}

ol.d li {
    float: left;
    margin-left: 1.5em;
}

ol.d li:before {
    clear: both;
    float: left;
    margin-left: -1.5em;
    content: '(' counter(item) ') ';
    counter-increment: item;
}

请务必使用ol后的任何元素清除浮动。

jsFiddle preview

Answer 2

Use below css for (1) style in ol listing


ol {
counter-reset: item;
list-style-type: none;
}

ol li{position: relative;}

ol li:before {
position: absolute;  
   margin: 0px 0 0 -25px;    
   vertical-align: middle;
   display: inline-block;
   content: '(' counter(item, decimal) ' ) ';
   counter-increment: item;
}

在列表样式中使`（1）`

2 个答案: