Question

没有std::map<Id, int> myData;，它会正确显示：

将<!doctype html> li元素移到左侧：

Firefox和IE中的结果相同。

HTML：

<!doctype html>

CSS：

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

我怎么能避免这个？

Answer 1

基本问题是您的HTML无效。使用a validator。

<li>项不允许是<div>的子元素。他们必须成为列表的一部分。

在Quirks模式下（当您未能提供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;
}

source

可以在样式表中包含该CSS，以便即使在标准模式下也可以应用它，但应该修复标记并编写有效的HTML。

当你参与其中时，你应该考虑编写更多的语义HTML。如果您有一系列带有名称，编辑链接和删除链接的内容......那么您的数据就比列表更具表格。

Answer 2

试试这个，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>

过去使用小写<!doctype html>时遇到类似问题，但<!DOCTYPE html>

从未遇到过同样的问题

弄乱了<li>元素

2 个答案: