0

コードエディタに問題があるので、ここにあります

<ul>
    <li>Item1</li>
    <ul>
        <li>Item 1.1</li>
        <li>Item 1.2</li>
    </ul>
    <li>Item2</li>
    <ul>
        <li>Item 2.1</li>
        <li>Item 2.2</li>
    </ul>
</ul>

そして、次のような結果を得るために要素をフロートさせたい:

http://adamaweb.com/faqme/target.png

そのマークアップで可能ですか？

4

4 に答える 4

2

内部<ul>の s が s に含まれている必要があるという点で、HTML は無効<li>です。複数の をネストしないと仮定すると、これは、最も内側の を除くすべてのおよびを<ul>作成することで実現できます<ul><li> display: inline-block<li>

http://jsfiddle.net/zeVwg/

于 2013-03-28T19:32:05.010 に答える
0

HTML:

<ul>
    <li>Item1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li>Item2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

CSS:

ul li { float:left; position:relative; margin-left:10px; list-style:none; width:120px;}
ul li:first-child{ margin:0px;}

ul ul { position:absolute; left:0; top:0; display:none; width:100px; z-index:10;}

ul li:hover ul{ display:block;}

ul ul li{ float:none; margin-left:0px; margin-top:5px; width:100px;}
ul ul li:first-child{ margin-top:0px;}

私はそのすべてのナビゲーションを作成しました.liにカーソルを合わせると、そのリストが表示されます.

于 2013-03-28T23:07:17.810 に答える
0

あなたはそのようなことをすることができます

CSS

ul li { 
    display: inline;
    vertical-align: top;
}
li > ul { display: inline-block; }
li > ul li { display: block; }

HTML

<ul>
    <li>Item1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li>Item2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

それをテストするためのフィドル。

于 2013-03-28T19:31:59.900 に答える
0

まず、次のように HTML を調整する必要があります。

<ul>
    <li>Item1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>


    <li>Item1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
</ul>
于 2013-03-28T19:32:11.810 に答える