javascript - 使用自定义列表计数器时获取列表元素以与父列表内联

标签 javascript html css

我有这个 html:

<ol>
  <li>
    <ol>
      <li>hello world</li>
      <li>hello world</li>
      <li>hello world</li>
    </ol>
  </li>
</ol>

和这个 CSS:

ol {
    counter-increment: alpha-list !important;
}
li::before {
    content: "(" counter(alpha-list, lower-alpha) ") " !important;
}
li{
  list-style:none;
}    

我的问题是嵌套 ol 中的第一个 li 与外部 ol< 中的第一个 li 不内联,而是向下推到它自己的行上。参见 https://jsfiddle.net/x2q5594y/3/ .

是否有任何 JavaScript 或 CSS 可用于将 li 元素放在同一行?

最佳答案

我已经摆弄了你的 fiddle 。这是你的意思吗?

https://jsfiddle.net/x2q5594y/6/

我添加了这些行:

ol li::before {
  float: left;
}

ol ol li::before {
  float: none;
}

关于javascript - 使用自定义列表计数器时获取列表元素以与父列表内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34663379/

相关文章:

javascript - 输入后倒计时自动重置

javascript - 使用 FileReader 读取多个文件并获取文件数据数组

javascript - 元素对象与 HTML 字符串

javascript - 如何使用按钮的 onchange 事件来运行所选按钮的 onclick 功能?

Jquery .slideToggle() 不适用于按钮单击

html - 简单的 CSS 样式不会显示.. 为什么?

css 找到最近的元素

javascript - 如何将 slideToggle 与动画和自动滚动相关联以达到匹配的 DIV?

javascript - Mysql错误更新动态行记录

php - 当我使用以下代码 : 从目录中调用导航时,下拉导航菜单中断