Question

我正在制作一个带有标题和副标题的列表。我的主要清单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;
}

Answer 1

此外，ul＆gt; div是无效的HTML。

Answer 2

我很难理解这个问题，但是看看你的标记，我发现你有一个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>

Answer 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出了什么问题的第一步就是删除所有无关的附加内容。

定位子标题内容而不影响其他HTML列表

3 个答案: