Question

我应该如何为每个ol li li元素添加边框，包括数字？

我读了一个包含问题列表的XML文件，并尝试动态地在HTML上添加ol li。

HTML

<div class="faq_row_holder">
    <ol class="faq_row"></ol>
</div>

JS

for (var i = 0 ; i < size; i++) {
   var question = xml.find('row').eq(i).find('question').text();
   $('.faq_row').append(" <li class='quest' ><a class='faq_row_question'>"+ question + "</a></li> <br>");
}

Answer 1

您可以将list-style-position设置为inside。

ol {
  list-style-position:inside;
  margin:0;
  padding:0;
}

li {
  border:1px solid
}

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

Answer 2

我删除了Jquery，因为我认为回答这个问题并不重要。您所要做的就是在样式表中添加list-style-position:inside;。

ol li {
  list-style-position:inside;
  border: solid 1px black;
}

<div class="faq_row_holder">
  <ol class="faq_row">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
  </ol>
</div>

希望这会有所帮助。问候

如何为li添加边框包括数字？

2 个答案: