Question

在我的测试页面上，当我按下<li>时，我已将其设置为在<ol>内创建<button>元素。我们说列表标题是"Problem"。代替 "1. Problem"，我希望它是"Problem 1."。有没有办法将<ol>数字放在列表标题之后？

        <form>                                              
            <button type="button" id="btn_add_task" class="btn btn-primary" title="Lägg till fler att-satser.">+</button>       
        </form>           

            <ol id="list_tasks" style="font-style:italic; font-size: 18pt; padding: 0">
            </ol> 

            <script>            
                function $(element) {
                    return document.getElementById(element);
                }

                var taskSubmit = $('btn_add_task');
                var taskBox = $('text_task');
                var taskList = $('list_tasks');

                taskSubmit.addEventListener('click', function(e) {
                    e.preventDefault();
                    var att = 'att';
                    var attNum = 1;

                    var newLI = document.createElement('li');
                    var newText = document.createElement('textarea');

                    newLI.appendChild(document.createTextNode(att + attNum + ': '));                    

                    spanNum.id = 'val';
                    newLI.id = 'list';
                    newText.className = 'attText';
                    newText.rows = 1;

                    taskList.appendChild(newLI);
                    taskList.appendChild(newText);

                }, false);
            </script>

Answer 1

根据this existing question对自定义<ol>列表元素的回复进行调整。你可以在li:before伪元素中添加各种内容，但是你需要使用边距和填充来确保内容排列和放大。间隔适当。

li本身的左边距可用于缩进＆amp;对齐文本内容。
li:before的左边距为负值＆amp;等于li
li:before的宽度必须适应前导号码的全宽。其他内容。
li:before的填充设置＆＃34;问题＃。＆＃34;之间的距离。和文本本身。
left的文字对齐li:before保持＆＃34;问题＆＃34;无论你拥有多少数字，都要对齐。

＆＃13;

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
    width: 100%;
}

li {
    display: block;
    margin-left: 5.5em;
    margin-bottom: 1em;
 
}

li:before {
    content: "Problem "counter(item) ".";  
    counter-increment: item;
    display: inline-block;
    text-align: left;
    width: 5em;                  
    padding-right: 0.5em;
    margin-left: -5.5em;
}

＆＃13;

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

＆＃13;

Answer 2

最接近的是

<ol dir="rtl">

Answer 3

CSS

)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

那么HTML就是

ol[dir=rtl] {
  list-style-position: inside;
}

Answer 4

这是一个简单的解决方案，只有CSS：

http://codepen.io/anon/pen/adVPrN

HTML：

<ol>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>

CSS：

ol {
  list-style: none;
  counter-reset: li;
}
ol li:after {
  counter-increment: li;
  content: " " counter(li) ".";
}

这里是CSS计数器的MDN网站： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Javascript＆amp; HTML - 在<li>标题后放置<ol>数字

4 个答案: