Question

我使用HTML Tidy输出漂亮的HTML源代码并作为最终编码检查。

然而，它采用了一个非常简单的列表，例如：

<ul id="navigation">
            <a href="index.php"><li>Summary</li></a>
            <a href="#"><li>Upload</li></a>
            <a href="accounts.php"><li>Accounts</li></a>
        </ul>

并将其转换为这种怪异：

 <ul id="navigation">
        <li style="list-style: none">
          <a href="index.php"></a>
        </li>
        <li id="active">Summary
        </li>

        <li style="list-style: none">
          <a href="#"></a>
        </li>
        <li>Upload
        </li>
        <li style="list-style: none">
          <a href="accounts.php"></a>
        </li>
        <li>Accounts
        </li>

      </ul>

我如何优雅地告诉它单独留下我的清单？

我搜索了这些configuration options，但我经常发现它们没有直观命名或正确解释。

Answer 1

它实际上是在尝试更正您的标记以使其符合标准，您的<li>标记应该在<a>标记周围，而不是相反，也许如果您修复它然后它赢了不要尝试在列表中添加额外的项目。

您可以删除样式部分，只需修改您的css即可：

ul.navigation li
{
    list-style: none;
}

Answer 2

唯一的答案：给它开始有效的标记。 ul的唯一合法子元素是li。 a元素不能是ul的子元素。

<ul id="navigation">
    <li><a href="index.php">Summary</a></li>
    <li><a href="#">Upload</a></li>
    <li><a href="accounts.php">Accounts</a></li>
</ul>

如果您希望整个li可点击，请将a元素设置为display: block：

#navigation li a {
    display: block;
}

Answer 3

您的列表是无效的标记; ul元素只能包含li个元素。 Tidy实际上是应用最合理的通用方法来修复这样的破坏标记：它将任何非li内容转换为li元素，其中列表bullter被抑制。

所以手动更改标记，如

<a href="index.php"><li>Summary</li></a>

到

<li><a href="index.php">Summary</a></li>

这可能就是你想要的。如果他们期望当前的标记，这可能需要更改CSS或JavaScript代码。

Answer 4

将<a>标记移至<li> - s：

<li><a href="index.php">Summary</a></li>

防止HTML整理添加li元素

4 个答案: