Fatal编程技术网
  • html/
  • Html 正在弄乱元素

Html 正在弄乱元素

html css

Html 正在弄乱元素,html,css,Html,Css,如果没有，则会正确显示： 随着li元素移动到左侧： Firefox和IE中的结果相同 HTML: 如何避免这种情况？基本问题是HTML无效。使用 项目不允许是项目的子元素。它们必须是列表的一部分 在无法提供Doctype时出现的“怪癖”模式中，浏览器应用的CSS如下所示： /* Quirk: make orphaned LIs have inside bullet (b=1049) */ /* force inside position for orphaned lis */ li { l

如果没有，则会正确显示：

随着li元素移动到左侧：

Firefox和IE中的结果相同

HTML:

如何避免这种情况？

基本问题是HTML无效。使用

项目不允许是项目的子元素。它们必须是列表的一部分

在无法提供Doctype时出现的“怪癖”模式中，浏览器应用的CSS如下所示：

/* Quirk: make orphaned LIs have inside bullet (b=1049) */

/* force inside position for orphaned lis */
li {
  list-style-position: inside;
}

/* restore outside position for lists inside LIs */
li ul, li ol, li dir, li menu {
  list-style-position: outside;
}

/* undo previous two rules for properly nested lists */
  ul ul,   ul ol,   ul dir,   ul menu,   ul li,
  ol ul,   ol ol,   ol dir,   ol menu,   ol li,
 dir ul,  dir ol,  dir dir,  dir menu,  dir li,
menu ul, menu ol, menu dir, menu menu, menu li {
  list-style-position: inherit;
}
您可以在样式表中包含CSS，这样即使在标准模式下也可以应用它，但您应该修复标记并编写有效的HTML

在编写时，您可能应该考虑编写更具语义的HTML。如果您有一系列具有名称、编辑链接和删除链接的内容，则您的数据更具表格性而非列表性。

请尝试此操作，将DOCTYPE大写，并将列表项置于无序列表中：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="content-wrapper">
      <ul>
        <li>Title - <a href='#'>[Edit]</a> | <a href='#'>[Delete]</a></li>
      </ul>
    </div>
  </body>
</html>
我过去在使用小写字母时也遇到过类似的问题，但在使用

时从来没有遇到过相同的问题。请注意，您应该使用！。你必须使用。修复你的html，阅读你为什么使用它？你使用的html是什么？@KarlBrown它现在被添加到帖子中。 
/* Quirk: make orphaned LIs have inside bullet (b=1049) */

/* force inside position for orphaned lis */
li {
  list-style-position: inside;
}

/* restore outside position for lists inside LIs */
li ul, li ol, li dir, li menu {
  list-style-position: outside;
}

/* undo previous two rules for properly nested lists */
  ul ul,   ul ol,   ul dir,   ul menu,   ul li,
  ol ul,   ol ol,   ol dir,   ol menu,   ol li,
 dir ul,  dir ol,  dir dir,  dir menu,  dir li,
menu ul, menu ol, menu dir, menu menu, menu li {
  list-style-position: inherit;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="content-wrapper">
      <ul>
        <li>Title - <a href='#'>[Edit]</a> | <a href='#'>[Delete]</a></li>
      </ul>
    </div>
  </body>
</html>