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

回答

相关问题