плавающая проблема с двумя контейнерами

#html #css

#HTML #css

Вопрос:

У меня есть эта разметка:

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

Ширина экрана достаточна для отображения 5 полей в одной строке, но весь контейнер 2 находится ниже контейнера 1, когда я плаваю, покидая uls

Как я могу заставить первую строку на экране отображать поля с 1 по 5, а вторую строку — поле 6 (как если бы все lis находились внутри одного контейнера и перемещались влево), сохраняя lis внутри двух разных контейнеров?

Спасибо

Ответ №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;
}

1. Работает нормально, но как насчет более широких экранов? Тогда 6-й li также переместится в верхнюю «строку».

2. @RunningTurtle Добро пожаловать! 🙂 @-KyleSevenoaks Я думаю, это то, о чем просил OP, не так ли?

Ответ №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;
    }

1. Почему у вас должно быть отображение inline и float слева? одно или другое должно подойти.

2. Вашему CSS-селектору: li {display: inline; float: left;} не нужны оба параметра float: left; и display: inline; Выберите один 🙂

3. Да, мы можем использовать display: inline один раз, но требуется float: left.

Ответ №3:

Вероятно, с такой разметкой вы не сможете этого сделать, потому что, если вы перемещаетесь ul и li влево, у вас будет каждый ul контейнер с плавающими элементами, и у вас недостаточно места для размещения 2 плавающих ul элемента. Вот почему вы перенесли вторую ul строку в новую.

Вы можете решить эту проблему, поместив все плавающие элементы в один контейнер.

Ответ №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>

Это один из способов сделать это, используя удивительный псевдоселектор n-го дочернего элемента.

Если вам нужно поддерживать 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/