html - 带有子列表的 float li 元素

Question

我遇到了一个小问题:

li {width: 50%; float: left;}
ul.sub li {width: 100%;}

<ul>
    <li>Test 1</li>
    <li>Test 2
         <ul class="sub">
            <li>Test2.1</li>
            <li>Test2.2</li>
            <li>Test2.3</li>
            <li>Test2.4</li>
            <li>Test2.5</li>
        </ul>
    </li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
 </ul>

我如何才能防止 Test 1 和 Test 3 之间出现那些巨大的空白区域？最好的选择是所有主要的 li 元素都适合该空白空间。

这可能吗？请帮助!

Answer 1

我不知道这是否是您正在寻找的，但这可能是一个解决方案。

li {
    width: 50%; 
    float: left;
}
li:nth-child(2){
    float: right;
}
li:nth-child(2) .sub li {
    float: none;
}

<ul>
    <li>Test 1</li>
    <li>Test 2
         <ul class="sub">
            <li>Test2.1</li>
            <li>Test2.2</li>
            <li>Test2.3</li>
            <li>Test2.4</li>
            <li>Test2.5</li>
        </ul>
    </li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
 </ul>

祝你好运