定位副标题内容而不影响另一个 HTML 列表答案

【问题标题】：Positioning subheading content without affecting another HTML list定位副标题内容而不影响另一个 HTML 列表
【发布时间】：2014-07-25 17:24:26
【问题描述】：

我正在制作一个带有标题和副标题的列表。我的主要列表 Home1 后面是一个副标题。如何在不影响其他列表的情况下准确定位副标题内容？

<div id="wrapper">
    <ul id="testnav">
        <li>
            <a href="#">Home</a>
            <ul id="subnav">
                <div style=" float : left; width :70%;" >
                    <li><a href="#">Sub Heading</a></li>
                    <li><a href="#">Sub Heading</a></li>
                    <li><a href="#">Sub Heading</a></li>
                </div>
                <div STYLE="float : left; width :30%; height:900px;">
                    Sub Heading Content
                </div>
            </ul>
        </li>
        <li><a href="#">Home2</a></li>
        <li><a href="#">Home3</a></li>
        <li><a href="#">Home4</a></li>
        <li><a href="#">Home5</a></li>
    </ul>
</div>

#testnav {
    list-style: none;
    padding: 0;
    marigin: 10px 10px 10px 0;
    width: 900px;
}
#subnav {
    list-style: none;
    padding: 0;
    marigin: 10px 10px 10px 0;
    width: 300px;
}

【问题讨论】：

你的解释真的难以理解，但现在稍微好一点..

标签： html css positioning

【解决方案1】：

我很难理解这个问题，但查看您的标记，我发现您有一个 DIV 作为 UL 的直接后代。只有 LI 元素可以是 UL 的子元素。

<ul id="subnav">
  <div style=" float : left; width :70%;" > <!-- THIS DIV CANNOT BE HERE -->
    <li><a href="#">Sub Heading</a></li>
    <li><a href="#">Sub Heading</a></li>
    <li><a href="#">Sub Heading</a></li>
  </div> <!-- THIS DIV CANNOT BE HERE -->
  <div STYLE="float : left; width :30%; height:900px;"> <!-- THIS DIV CANNOT BE HERE -->
    Sub Heading Content
  </div> <!-- THIS DIV CANNOT BE HERE -->
</ul>

【讨论】：

【解决方案2】：

另外，ul > div 不是有效的 HTML。

【讨论】：

UL 元素应该有 LI 元素作为它们的子元素。

【解决方案3】：

解决问题的第一步是确保您的标记按照安迪福特的建议正确无误。其次，确保代码中 CSS 的拼写正确可能会有所帮助。

根据我从你的问题中可以看出，你试图确保 #subnav 相对于 #testnav 绝对定位。

<ul id="testnav">
    <li>
        <a href="#">Home</a>
        <ul id="subnav">
            <li><a href="#">Sub Heading</a></li>
            <li><a href="#">Sub Heading</a></li>
            <li><a href="#">Sub Heading</a></li>
        </ul>
    </li>
    <li><a href="#">Home2</a></li>
    <li><a href="#">Home3</a></li>
    <li><a href="#">Home4</a></li>
    <li><a href="#">Home5</a></li>
</ul>
#testnav, #subnav { list-style:none; padding:0; }
#subnav {
    position: absolute;
    width: 300px;
}

我不确定这是否是您想要的，但通常，找出 CSS 出了什么问题的第一步是尽可能删除所有无关的添加。

【讨论】：