Быть совершенно новым для 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;
}
Проблема заключается в том, что в списке выходных данных находится список номеров, но весь текст находится под номерами каждой новой строки.
Я не хочу жестко кодировать новую строку, так как мое окно приложения изменяет размер и текст может перейти в новую строку.
Я также попытался создать подэлемент textarea, p html для каждого li, но он возвращается к новой строке вместо продолжения из числа.
Прикрепленное является результатом того, что я получаю от кода css и собственного кода
Один из вариантов - обернуть текст li
в тег p
и добавить этот CSS:
p{
position: relative;
top: -35px;
left: 30px;
}
Попробуйте что-то вроде этого:
margin-left: -20px; text-indent: 20px; // or padding-left
Попробуй использовать
li.stepButtonsWV{float:left}