сделать элементы списка рядом друг с другом

У меня есть меню с подменю. Я использовал вложенные uls для достижения этого. Теперь я столкнулся с этой ситуацией: я хочу, чтобы все элементы и подэлементы отображались горизонтально на соответствующем уровне. Проблема в том, что когда у родительского списка есть дочерний список, его ширина увеличивается, поэтому следующий элемент на том же уровне уходит далеко вправо.

Чтобы было понятнее, вот немного того, о чем я говорю: http://jsfiddle.net/matias/n8gFT/

Как вы можете видеть, я хотел бы, чтобы элементы B и C были размещены там, где находятся зеленые пунктирные пробелы.

Можно ли сделать это?

Я хотел бы продолжать использовать вложенные uls и display: inline-block для элементов вместо float: left

ОБРАЗЕЦ HTML:

<ul>
    <li>ITEM A
        <ul>
            <li>sub item A1</li>
            <li>sub item A2</li>
        </ul>
    </li>
    <li>ITEM B</li>
    <li>ITEM C</li>
</ul>

ОБРАЗЕЦ CSS:

ul{border: 1px solid red; padding: 10px;}
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;}
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;}

РЕДАКТИРОВАНИЕ 1. Я забыл вам сказать: у A, B и C есть дети. Если я нажму на B, его дети будут показаны, а A и C скрыты... и так далее....


html css nested-lists html-lists
person Matías Cánepa    schedule 07.07.2013    source источник
comment
csswizardry.com/2011/02/creating-a-pure -css-раскрывающееся меню   -  person Emilio Gort    schedule 07.07.2013
comment
@EmilioGort Я хочу горизонтальный список, а не вертикальный.   -  person Matías Cánepa    schedule 07.07.2013
comment
что происходит, когда у элемента B или C также есть подэлементы?   -  person tyler    schedule 07.07.2013
comment
@tman хорошая мысль! посмотри мое редактирование 1   -  person Matías Cánepa    schedule 07.07.2013
comment
добавлено исправление, будет ли это работать?   -  person tyler    schedule 07.07.2013
comment
Обновленный ответ Проверьте это   -  person tyler    schedule 07.07.2013

Ответы (4)


arrow_upward
7
arrow_downward

Мы начнем с небольшого CSS

#menu > li.sub ul {
  list-style: none;
  position: absolute;
  top: -1000em;
  left: 0px;
}


#menu li.sub ul li a {
  display: inline;
}

#menu > li.sub:hover ul {
  top: 3em;
}

#menu{
  text-align:left;
}

li{
  display:inline-block;
}

Закончите с HTML

<ul id="menu" >

  <li class="sub"> 
    ITEM A
    <ul>
      <li>sub A1</li>
      <li>sub A2</li>
    </ul>
  </li>

  <li class="sub">
    ITEM B
    <ul>
      <li>sub B1</li>
      <li>sub B2</li>
    </ul>
  </li>

  <li class="sub">
    ITEM C
    <ul>
      <li>sub C1</li>
      <li>sub C2</li>
    </ul>
  </li>

</ul>

и JSFIDDLE http://jsfiddle.net/ShADm/28/

person tyler    schedule 07.07.2013
comment
если вы хотите поместить весь код в другой ul, чтобы собрать его вместе! см. jsfiddle.net/n8gFT/4 - person tyler; 07.07.2013
comment
что это то, что я хочу визуально, но оно не вложенное. И мне нужно, чтобы они были вложены для целей программирования. - person Matías Cánepa; 07.07.2013
comment
не могли бы вы использовать php и добиться этого - person tyler; 07.07.2013
comment
Если это не так, я не знаю, что это такое! До следующего раза woooshhhhhh - person tyler; 07.07.2013
comment
Это выглядит многообещающе! Вы думаете, что иерархию можно сделать? Я имею в виду... что подэлементы появляются слева от родителя, а не все слева 0 - person Matías Cánepa; 07.07.2013
comment
попробуй :) ... тебе придется еще немного изложить для меня problamo .... ты хочешь, чтобы элементы начинались под родителем, правильно? Попробуйте удалить эту строку и посмотрите, желаемый ли это вид! - person tyler; 07.07.2013

arrow_upward
1
arrow_downward

Вы можете стилизовать списки, которые передаются of margin-left: -20px;, вот рабочая скрипка

http://jsfiddle.net/n8gFT/1/

Конечно, сумму, которую он передвинул, можно отредактировать, изменив margin-left

person Community    schedule 07.07.2013
comment
спасибо, но списки динамические. Во-первых, я не знаю, сколько предметов будет. использование абсолютного поля не будет работать. - person Matías Cánepa; 07.07.2013
comment
Вы можете использовать PHP, говоря, что если есть подкатегория, установите для следующего элемента списка значение margin-left, хотя если бы вы это сделали, вам пришлось бы делать всю страницу в PHP. - person ; 07.07.2013

arrow_upward
1
arrow_downward

Я добился того, что искал, используя display: table-cell для li и уменьшая ширину ul.

См. демонстрацию.

person Matías Cánepa    schedule 20.11.2013

arrow_upward
-2
arrow_downward

Добавьте класс в подсписки и настройте их следующим образом:

.sub { position: absolute; margin-left: -27px; }
person Anton Molenaar    schedule 07.07.2013