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

質問を理解するのに苦労していますが、あなたのマークアップを見ると、UL の直系の子孫として DIV があることがわかります。UL の子になることができるのは LI 要素だけです。

<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 に答える