родительский ul не расширяется до содержимого

0

Зеленая улица не расширяется, чтобы плавать, оставив две синие лики. Абсолютное значение для зеленого вызывает мое горе на высоте, не покрывающей его вложенные элементы. Как я могу пройти мимо этого, чтобы зеленый фон расширялся, чтобы покрыть его детей? Я хотел бы сохранить это как прямой css, но если jquery будет делать трюк, который им интересен. http://jsfiddle.net/B34AU/

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul {
    background: red;
}
li {
    display: inline-block;
    position: relative;
    width: 100px;
    background: yellow;
    margin: 10px;
}
li  ul {
    display: none;
    position: absolute;
    background: green;
    overflow: visible;
    white-space: nowrap;

}
li:hover > ul {
    display: block;
}
li > ul > li {
    background: blue;
    width: 200px;
    display: inline-block;
}

li > ul > li > ul {
    background: #cc0000;
    display:block;
}

li > ul > li > ul > li {
    background: #cc0000;
    display:block;
    width: 200px;
    margin: 0;
    padding: 0;
}
   <ul>
    <li>
        1
        <ul>
            <li><a href="">1.1</a>
            <ul>
            <li><a href="">1.1.1</a></li>
            <li><a href="">1.1.2</a></li>
            <li><a href="">1.1.3</a></li>
            </ul>
            </li>
            <li><a href="">1.2</a></li>
            <li><a href="">1.3</a></li>
        </ul>
    </li>
    <li>
        2
        <ul>
            <li>2.1</li>

        </ul>
    </li>
    <li>
        3
        <ul>
            <li>3.1</li>
            <li>3.2</li>
        </ul>
    </li>
</ul>
  • 0
    Лучше использовать дочерние селекторы ( > ) вместо потомков, которые медленнее.
Теги:

3 ответа

0
Лучший ответ

Я изменил эти строки CSS и его работу отлично, как ожидалось.

Рабочая демонстрация

Изменены эти CSS

li > ul > li {
    background: blue;
    width: 200px;
    display: inline-block;
    vertical-align: top; /*Added this line*/
}

li > ul > li > ul {
    background: #cc0000;
    display:block;
    position: static;/*Added this line*/
}
1

Если вы хотите развернуть <ul> независимо от количества детей, вы можете использовать

li > ul {
    white-space: nowrap;
}
li > ul > li {
    display: inline-block;
}

демонстрация

  • 0
    это работает для ширины, но теперь, если я хочу добавить вложенный ul в 1.1, то есть 1.1.1, 1.1.2, 1.1.3 и т. д. высота просто добавляет скроллеры?
  • 0
    @ user520300 Использовать li > ul { overflow: visible; } вместо auto . демонстрация
Показать ещё 2 комментария
0

демонстрация

Вам нужно установить width:

width: 440px;

Просто используйте следующую формулу

numChilds * (marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRigth + marginRigth)
= 2 * (10+0+0+200+0+0+10)
= 2 * 220
= 440
  • 0
    Есть ли способ, что зеленый расширяется или сокращается в зависимости от количества подводных лодок? скажем, есть три под 1, один под 2, и два под три?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню