Question

我有这个标记：

div#wrapper
  ul#container1
    li#box1
    li#box2
    li#box3
  ul#container2
    li#box4
    li#box5
    li#box6

屏幕宽度足以在一行上显示5个方框，但当我向左移动时，整个容器2位于容器1下方

如何在屏幕显示框1到5和第二个线框6上显示第一行（好像所有lis都在一个容器内并向左浮动），同时将lis保持在两个不同的容器内？

由于

Answer 1

提供ul元素display: inline和li元素display: inline-block

见这里：http://jsfiddle.net/hW7Aj/1/

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li> 
</ul>
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li> 
</ul>

CSS

ul {
    display: inline;
}

li {
    display: inline-block;
    width: 80px;
    border: 1px solid black;
}

Answer 2

对于html：

 <div>
    <ul class="li1">
        <li>c</li>
        <li>c</li>    
        <li>c</li>
    </ul>

    <ul class="li1">
        <li>c</li>
        <li>c</li>    
        <li id="last">c</li>
    </ul>
 </div>

CSS：

    .li1 {
        display: inline;
    }

    #last {
        clear: both;
    }
    li {
        display: inline;
        float: left;
    }

Answer 3

可能使用此类标记您无法执行此操作，因为如果您将ul和li浮动到左侧，则每个ul都将作为容器中的浮动元素并且您不要没有足够的空间来放置2个浮动的ul元素。这就是你将第二个ul包裹到新行的原因。

您可以通过将所有浮动元素放在一个容器下来解决此问题。

Answer 4

您需要两个CSS规则：

ul.second li:nth-child(3)
{
    clear: both;
}

li {         
    float: left;
}

HTML

<ul>     
    <li>1</li>     
    <li>2</li>     
    <li>3</li>  
</ul>
<ul class="second">
    <li>4</li>     
    <li>5</li>     
    <li>6</li>  
</ul>

这是使用令人敬畏的nth-child伪选择器的一种方法。

如果你必须支持IE，那么你可以改变一个类到最后一个li

<ul>     
    <li>1</li>     
    <li>2</li>     
    <li>3</li>  
</ul>
<ul<
    <li>4</li>     
    <li>5</li>     
    <li class="myLi">6</li>  
</ul>

并相应地更改CSS：

li.myLi    {
    clear: both;
}

li {         
    float: left;
}

http://jsfiddle.net/zN4W5/

浮动问题有两个容器

4 个答案: