Question

我有以下HTML输出：

一些文字

如您所见，我正在使用此HTML：

<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
<ul>

问题是我想在第二个<li>元素之后插入一个div，并且它是无效的HTML以将div放入列表中。所以我想将我的HTML更改为：

<div class="Container">
  <div class="MyListElement">some text</div>
  <div class="MyListElement">some text</div>
  <div class="SomeOtherClass">A bunch of nested divs here</div>
  <div class="MyListElement">some text</div>
</div>

这样可行，但问题是它不会显示<li>元素前面的点字符。

我应该更改/添加到基于<div>的HTML，以便我有一个大的点字符，就像基于<li>的HTML中显示的点字符一样。

感谢您的建议。

Answer 1

您只需为div的内部display: list-item添加.Container：

div.Container > div
{
   display: list-item;
}

Answer 2

问题是我想在第二个<li>之后插入一个div 元素和它是无效的HTML将div放在列表中。

您可以将div s 放入 li标记中：

<ul>
  <li>some text</li>
  <li>
      some text
      <div class="level-1-div">
          hello
          <div class="level-2-div">real</div>
      </div>
      <div class="level-1-div">world</div>
  </li>
  <li>some text</li>
<ul>

请参阅jsfiddle。

enter image description here

Answer 3

这将有效（所有带有班级MyListElement的div都将以子弹开头。）

div.Container > div.MyListElement {
    display: list-item;
    margin-left: 1.3em;
    list-style-type: bullet;
}

DEMO.

Answer 4

试试这个

<div class=libox>this should have a bullet before it</div>
<div class=libox>so should this</div>

<style>

.libox {
margin-top: 4pt;
margin-bottom: 6pt;
margin-left: 1em;
display: list-item;
list-style: disc;
margin-right: 0pt;
text-indent 0pt;
font-family: Arial, "Trebuchet MS", Verdana;
</style>

Answer 5

对于一个你无法用list-item做的div，你无能为力。如果你有一个真正的列表，保持它作为一个列表（如果仅用于语义/可读性），并且不要将该项作为div插入 - 而是将其作为另一个列表项插入并适当地设置样式 - 你可以如果这是你的目标，只需关闭那个项目的点：

<li id='aNonBulletedItem'>Some text </li>

CSS：

#aNonBulletedItem{list-style:none}

使用<div>标签</div> </li>时复制<li>点

5 个答案: