0

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

3 回答 3

1

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

于 2009-02-04T06:34:30.890 回答
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>
于 2009-02-04T06:39:52.020 回答
1

解决问题的第一步是确保您的标记是正确的，正如 Andy Ford 所建议的那样。其次，确保代码中 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 出了什么问题的第一步是尽可能删除所有无关的添加。

于 2009-02-04T12:03:12.350 回答