0


      对 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 子元素，但它会掉到新行，而不是从圆圈数字继续。在此处输入图像描述


  附件是我从css和本机列表代码中得到的输出

4

3 回答 3

2

工作演示

一种选择是将li文本包装在p标签中并添加以下 CSS：

p{
    position: relative; 
    top: -35px;
    left: 30px;
}
于 2013-10-01T12:04:45.433 回答
0

尝试这样的事情：

margin-left: -20px; text-indent: 20px; // or padding-left
于 2013-10-01T11:58:46.017 回答
0

尝试使用

  li.stepButtonsWV{float:left}
于 2013-10-01T11:58:49.533 回答