Javascript&；HTML-Place<；ol>；后面的数字<；李>；标题_Javascript_Html

Javascript&；HTML-Place<；ol>；后面的数字<；李>；标题

javascript html

Javascript&；HTML-Place<；ol>；后面的数字<；李>；标题,javascript,html,Javascript,Html,在我的测试页面上，我将其设置为在按下时在内创建元素。假设列表标题为“问题”。而不是 “1.问题”，我希望它是“问题1”。。有没有办法将数字放在列表标题之后 <form> <button type="button" id="btn_add_task" class="btn btn-primary" title="Lägg till fler att-

在我的测试页面上，我将其设置为在按下

时在

内创建

元素。假设列表标题为“问题”。而不是

“1.问题”

，我希望它是

“问题1”。

。有没有办法将

数字放在列表标题之后

        <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>


+       
函数$（元素）{
返回单据.getElementById（元素）；
}
var taskSubmit=$（'btn_add_task'）；
var taskBox=$（'text_task'）；
var taskList=$（'list_tasks'）；
taskSubmit.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
var att=‘att’；
var-attNum=1；
var newLI=document.createElement（'li'）；
var newText=document.createElement（'textarea'）；
appendChild（document.createTextNode（att+attNum+'：'）；
spanNum.id='val'；
newLI.id='list'；
newText.className='attText'；
newText.rows=1；
任务列表。appendChild（newLI）；
taskList.appendChild（newText）；
}，假）；

最接近的是

<ol dir="rtl">

最接近的是

<ol dir="rtl">

CSS

那么HTML就是

<ol dir="rtl">
 <li>Problem</li>
 <li>Something else</li>
</ol>


问题
别的

CSS

那么HTML就是

<ol dir="rtl">
 <li>Problem</li>
 <li>Something else</li>
</ol>


问题
别的

这里有一个简单的解决方案，只需使用CSS即可：

HTML:

这里是CSS计数器的MDN站点：

这里有一个简单的解决方案，只需使用CSS即可：

HTML:

这里是CSS计数器的MDN站点：

改编自对自定义

列表元素的响应。您可以将各种内容放入

li:before

伪元素中，但您需要播放w/边距和填充位，以确保内容排列整齐且间距适当

```
li
```
本身的左边距可用于缩进和对齐文本内容
```
li的左边距：在
```
之前为负数，等于
```
li的左边距
```
```
li:before
```
的宽度必须适应前导数字和其他内容的全宽
```
li:before
```
的填充设置“Problem#”和文本本身之间的距离
文本对齐
```
left
```
of
```
li:before
```
保持“问题”对齐，无论您有多少个数字

ol{
计数器重置：项目；
左边距：0；
左侧填充：0；
宽度：100%；
}
李{
显示：块；
左边距：5.5em；
边缘底部：1米；
}
李：以前{
内容：“问题”计数器（项目）”；
反增量：项目；
显示：内联块；
文本对齐：左对齐；
宽度：5em；
右侧填充：0.5em；
左边距：-5.5em；
}


一个
两个
三
四
五
六
七
八
九项
十项

改编自对自定义

列表元素的响应。您可以将各种内容放入

li:before

伪元素中，但您需要播放w/边距和填充位，以确保内容排列整齐且间距适当

```
li
```
本身的左边距可用于缩进和对齐文本内容
```
li的左边距：在
```
之前为负数，等于
```
li的左边距
```
```
li:before
```
的宽度必须适应前导数字和其他内容的全宽
```
li:before
```
的填充设置“Problem#”和文本本身之间的距离
文本对齐
```
left
```
of
```
li:before
```
保持“问题”对齐，无论您有多少个数字

ol{
计数器重置：项目；
左边距：0；
左侧填充：0；
宽度：100%；
}
李{
显示：块；
左边距：5.5em；
边缘底部：1米；
}
李：以前{
内容：“问题”计数器（项目）”；
反增量：项目；
显示：内联块；
文本对齐：左对齐；
宽度：5em；
右侧填充：0.5em；
左边距：-5.5em；
}


一个
两个
三
四
五
六
七
八
九项
十项

有代码吗？你试过什么？我们需要知道更多…但它看起来像一个css伪：在任何代码之后？你试过什么？我们需要知道更多…但它看起来像一个css伪：afterCan不能做到这一点。它会改变太多，我不知道。当我只为李尝试rtl时，数字是偏右的。如果我们能把数字接近正常标题那就太好了：DCA不能这样做。它会改变太多，我不知道。当我只为李尝试rtl时，数字是偏右的。如果我们能把数字接近正常的标题，那就太好了：d对不起，请阅读前面的答案。无论如何，谢谢：）但是这个CSS使数字接近你所要求的文本。哦，很抱歉错过了这一部分，我会尝试一下！不，对不起，请阅读前面的答案。无论如何，谢谢：）但是这个CSS使数字接近你所要求的文本。哦，很抱歉错过了这一部分，我会尝试一下！

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