0

各 ul がページ上で物理的に同じ高さレベルになるようにリストを設定する最善の方法を考えようとしています。たとえば、次の場合：

<ul>
    <li>1</li>
    <li>2
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>3</li>
</ul>

次のように表示されます。

1   2.1
2   2.2
3

私が思いついた唯一の方法<ul>は、相対的に配置されたコンテナーの上部にそれぞれを絶対的に配置することですが、コンテナーがその子のサイズを維持することを望みます。私はしばらくブレインストーミングを行ってきましたが、良い解決策が思い浮かびませんでした。floatまたはの場合display:inline-block;、各サブセット リストはその親の先頭を継承するため、次のように表示されます。

1
2   2.1
3   2.2

そうは言っても...助けて！

4

2 に答える 2

0

ここにコード全体を投稿します。HTMLを少し編集しました。

<ul class="menu">
    <li><span>1</span></li>
    <li><span>2</span>
        <ul class="sub_menu">
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li><span>3</span></li>
</ul>​

あなたはcssを編集することができます（あなたのニーズに合うように背景色、色、幅など）

.menu li span{
    display:block;
    float:left;
    width: 20px;
    background-color:#ddd;
    padding:2px;
}
.menu li ul{
    float:left;
}

.menu ul li{
    padding:2px;
    float:left;
    margin:0px 5px;
    background-color:#eee;
}

.menu ul{
    clear:right;
    overflow:auto;    
}

.menu > li{
    clear:both;
    background-color:#ccc;
    overflow:auto;
    width:100px;
}
​

JSFIDDLE ASWELLhttp://jsfiddle.net/zTygm/1へのリンクは次のとおりです 。

于 2013-01-04T09:48:52.337 に答える
0

信じられないほどトリッキーに見えます。親子関係でつながっていない 2 つのリストにデータを分割できない理由はありますか? おそらく、クライアント側で子リストを引き出すためにJavaScriptを使用することさえあります。

jQueryでこれに似たもの：

var childLists = $("ul > li > ul");
$(".listsContainer").append(childLists);
$("ul > li > ul").remove();

そして、いくつかの基本的な css を使用して、新しいリストを所定の位置に移動します。おそらく、それらを独自のサブコンテナーに「追加」して、互いの上に簡単にスタックできるようにするのが最善です。

編集:作業例http://jsfiddle.net/3HqxL/ (CSS は JavaScript である必要はありません)

于 2013-01-04T09:35:37.990 に答える