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>

如何防止测试1和测试3之间的那些巨大的空白空间？最好的选择是所有主要的li元素都适合那个空白区域。

这可能吗？请帮忙！

Answer 1

我不知道它是否适合您，但这可能是一种解决方案。

＆＃13;

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

＆＃13;

<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>

＆＃13;

祝你好运＆＃39;

Answer 2

在将第二个countryList = (ArrayList<Country>) savedInstanceState.getParcelableArrayList("countryList");推向右侧后，您可以将所有奇数//:0推向左侧，将偶数推向右侧，其余部分将被强制执行由于空间不足而留在左侧：

＆＃13;

li

＆＃13;

li

＆＃13;

Answer 3

猜猜..

＆＃13;

ul.sub li {width: 90%; float:right;}
li {width: 50%; }

＆＃13;

<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>

＆＃13;

Answer 4

我建议将类添加到<li>按住子菜单，以避免将li nth号码硬编码到CSS中。那么您的子ul上就不需要上课了。这样您就可以根据标记中的位置移动html submenu而不用css：

HTML：

<ul>
    <li>Test 1</li>
    <li class="sub">Test 2
         <ul>
            <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>

CSS：

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

浮子元素与子列表

4 个答案: