Проблемы с пользовательским интерфейсом CSS - PullRequest
Новая
       29

Проблемы с пользовательским интерфейсом CSS

0 голосов
/ 13 марта 2012

Я создал пользовательский выпадающий элемент, который указан на этой странице:

http://jsfiddle.net/spryno724/2snUH/3/

Нажмите на выпадающее меню в разделе «Результат», и вы увидите проблему. Прокручивая варианты в раскрывающемся списке, вы заметите, что индикаторы прокрутки не растягиваются до доступной ширины.

Хотя по-прежнему поддерживает ширину меню, когда оно было свернуто , как я могу растянуть цвет фона для каждого пункта меню? Я также хотел бы, чтобы каждый пункт меню оставался на отдельной строке. Несколько настроек, которые я сделал в CSS, заставили некоторые элементы списка переносить свой собственный текст.

Спасибо за ваше время.

Ответы [ 2 ]

1 голос
/ 13 марта 2012

Для определения ширины элементов li используйте: 

    ul.dropdown.open {
    padding: 5px 0;
}
    ul.dropdown.open li {
        display: block;
        padding: 5px;
        text-wrap: none;
        width: 100%;
        box-sizing: border-box;
    }
1 голос
/ 13 марта 2012

Используйте отрицательные поля с width: auto вместо width: 100% для элементов: 

UL.dropdown.open LI {
    margin: 0 -23px 0 -10px;
    padding-right: 23px;
    padding-left: 10px;
    position: relative;
    width: auto;
}

См. http://jsfiddle.net/2snUH/4/.

Или избавьтесь от горизонтальных отступов для UL (и вместо этого укажите горизонтальное заполнение для LI), и тогда вам не понадобятся отрицательные поля для LI элементов.

...