製作`（1）`在列表樣式

我想在HTML中使用list製作`（1）`在列表樣式

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

現在我想縮進第二行也。我怎樣才能做到這一點？

來源

2011-04-06 rubyprince

一個幾乎相同的問題都可以在這裏找到：如何設置黎族風情??]（http://stackoverflow.com/questions/4644469/how-to-set-我不認爲我應該重新發布相同的答案，因爲我已經回答了一個同樣適用於您的解決方案... – BoltClock 2011-04-06 06:44:02

@ boltclock..I編輯了我的問題..你可以瞭解更多？ – rubyprince 2011-04-07 10:12:49

我會看看我能想出什麼。 – BoltClock 2011-04-07 10:21:26

我想出了一個解決方法，使用浮動，但它是極其脆弱並依賴於您將擁有的實際數量的列表項。數字的位數越多，您就越需要增加利潤來解釋它。更不用說它取決於你使用的字體了。

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

來源

2011-04-08 12:28:47 BoltClock

不需要浮筒，它也可以在沒有浮筒的情況下工作。 – 2011-04-08 12:53:35

@Konrad Rudolph：我的回答是關於生成的內容與內容內聯的後續問題，通常可以通過使用'list-style-position：outside'解決，但在這種情況下不能。 – BoltClock 2011-04-08 12:57:54

@BoltClock我意識到這一點。只需在jsFiddle中嘗試使用浮動刪除代碼 - 它仍然有效：http://jsfiddle.net/bmkjd/4/ – 2011-04-08 13:06:36

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; 
}

來源

2013-06-19 04:15:40 manikandan

製作`（1）`在列表樣式

回答

相關問題