html + css：避免使用圓圈編號列表li，ol

對於嘗試使用文本創建帶圓圈列表的CSS來說，這是相當新的嘗試。
我有一個有序的編號列表，每個li元素上都有文本。
我添加了一個CSS添加被圈住的數字給每個文本比本地號碼列表（1 2）html + css：避免使用圓圈編號列表li，ol

我的HTML代碼：

<ol> 
    <li class="stepButtonsWV">Add all the panorama nodes. 
     <br> 
     <br> 
    </li> 
    <li class="stepButtonsWV">Add plans (optional). 
     <br> 
     <br> 
    </li> 
    <li class="stepButtonsWV">Place the nodes on the plan and create links between them. 
     <br> 
     <br> 
    </li> 
    <li class="stepButtonsWV">Preview your Panorama, modifiy the nodes altitude if necessary, test the 
     navigation between the nodes and calculate your panorama for the Web and/or 
     the mobiles.</li> 
</ol>

CSS代碼：

ol { 
    counter - reset: li; 
} 

li.stepButtonsWV { 
    list - style - type: none; 
    counter - increment: li; /* repas on incrÈmente le compteur ‡ chaque nouveau li */ 
    margin - bottom: 10px; 
} 



li.stepButtonsWV: before { 
    content: counter(li); 
    padding: 1.5px 6px 1.5px; 

    background - color: rgb(63, 63, 63); 
    border - style: outset; 
    border - width: 2px; 
    border - radius: 30px; 
    border - color: rgb(200, 200, 200); 
    color: rgb(200, 200, 200); 
    font: bold 10px; 
    border - style: solid; 
    text - align: center; 
}

問題是輸出列表是圓圈數字列表，但所有文本都在每個新行的數字下。
我不想硬編碼新行，因爲我的應用程序窗口可調整大小，文本可以放到新行。

我也嘗試在每個li上創建一個textarea，p html子元素，但它會掉落到新行，而不是從圈出的數字繼續。 enter image description here

附件中是我從CSS和本地代碼列表

來源

2013-10-01 Vacca

Working DEMO

一個選項是將li文本包裝成p標記並添加此CSS：

p{ 
    position: relative; 
    top: -35px; 
    left: 30px; 
}

來源

2013-10-01 12:04:45

得到嘗試是這樣的輸出：

margin-left: -20px; text-indent: 20px; // or padding-left

來源

2013-10-01 11:58:46

嘗試使用

li.stepButtonsWV{float:left}

來源

2013-10-01 11:58:49

html + css：避免使用圓圈編號列表li，ol

回答

相關問題