CSS Li ширина фона

#css

Вопрос:

Я использую следующий css для своих элементов li.

 div.categories li.selected
{
    background-color:#d6d6d6;
    white-space: nowrap;
    list-style-type: square;
    padding-right: 5px;
    padding-left: 5px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    white-space: nowrap;
    line-height: 20px;
    width: 50px;
}

Проблема в том, что ширина содержимого в элементах li постоянно меняется, но я не могу изменить ширину фона в соответствии с содержимым li. И если я сохраняю фиксированную ширину, проблема появляется, как показано ниже, в противном случае, если я не сохраняю фиксированную ширину, фон растягивается до конца.

введите описание изображения здесь

Ответ №1:

Трудно сказать, не видя элементов вокруг вашего кода, но мне кажется, что содержащий UL или div.categories имеет заданную ширину, и некоторые из LI нарушают эту ширину из-за длины их содержимого. По умолчанию LI будут растягиваться до любой необходимой им ширины, а цвет фона заполнит все пространство, независимо от его ширины.

Попробуйте снять все ограничения, которые у вас есть по ширине UL или div.container или что-то выше, что блокирует UL на месте.

Ответ №2:

Не уверен, но помогает ли display:block в LI (или span в LI) с тем, что вы ищете?