html + css:避免使用带圆圈编号的列表li,ol下的文本

时间:2013-10-01 11:54:50

标签: html css


    对于尝试使用文本创建带圆圈的列表的CSS来说是相当新的。
我有一个有序的编号列表,每个li元素都有文本。
    我添加了一个CSS,用于为每个文本添加带圆圈的数字,而不是本机编号列表(1. 2.)

我的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和本地列表代码中得到的结果

3 个答案:

答案 0 :(得分:2)

Working DEMO

一个选项是在li标记中包含p文字并添加此CSS:

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

答案 1 :(得分:0)

尝试这样的事情:

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

答案 2 :(得分:0)

尝试使用

  li.stepButtonsWV{float:left}