2

我有以下 HTML 输出：

  • 一些文字
  • 一些文字
  • 一些文字

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

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

    问题是我想在第二个<li>元素之后插入一个 div 并且将 div 放入列表中是无效的 HTML。所以我想将我的 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 中显示的字符一样。

    感谢您的建议。

    4

    5 回答 5

    4

    您可以简单地display: list-item为 div 的内部添加.Container：

    div.Container > div
{
   display: list-item;
}
    于 2013-10-26T22:58:13.387 回答
    1

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

    您可以将divs放入 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。

    在此处输入图像描述

    于 2013-10-26T23:04:57.537 回答
    1

    这将起作用（所有具有类的 divMyListElement都将在前面加上一个项目符号。）

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

    演示。

    于 2013-10-26T23:14:21.910 回答
    0

    试试这个

    <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>
    于 2013-10-26T23:02:18.453 回答
    0

    div 没有什么是列表项不能做的。如果您有一个真正的列表，请将其保留为列表（如果只是为了语义/可读性），并且不要将该项目作为 div 插入——而是将其作为另一个列表项插入并适当地设置它的样式——你可以如果这是您的目标，只需关闭该项目的点即可：

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

    CSS：

    #aNonBulletedItem{list-style:none}
    于 2013-10-26T23:14:28.637 回答