Ширина UL HTML

Учитывая следующую разметку:

<ul>
   <li>apple</li>
   <li class="highlight">orange</li>
   <li>pear</li>
</ul>

Обе ширины ul и li кажутся 100%. Если я применил элемент background-color к элементу списка, подсветка растягивает всю ширину страницы.

Я хочу, чтобы подчеркивание фона растягивалось так же широко, как и самый широкий элемент (возможно, с некоторым дополнением). Как ограничить ширину li (или, возможно, ul) ширины самого широкого элемента?

Ответ 1

Добавление стиля ul {float: left; } заставит ваш список выбрать предпочтительную ширину, что вам нужно.

Проблема заключается в том, что следующий элемент идет ниже списка, как и раньше. Очистка должна позаботиться об этом.

Ответ 2

Можете ли вы сделать это так?

<ul>
   <li>apple</li>
   <li><span class="highlight">orange</span></li>
   <li>pear</li>
</ul>

Ответ 3

Точно так же, как сказал BoltBait, оберните свой текст встроенным элементом, например span, и дайте этому классу.

<ul>
    <li>apple</li>
    <li><span class="highlight">orange</span></li>
    <li>pear</li>
</ul>

Мои дополнительные 2 цента - это то, что если у вас нет доступа к изменению HTML, вы можете сделать это с помощью Javascript. В jQuery:

$('li.highlight').wrapInner("<span></span>");

и используйте CSS:

li.highlight span { background-color: #f0f; }

edit: после повторного чтения вашего вопроса вы можете уточнить: хотите ли вы, чтобы подсветка была только шириной, чем выделенный элемент, или такой же широкий, как и самый широкий элемент в списке? например:

    - short
    - items ********************
    - here
    - and then a really long one

... где звездочки представляют собой выделение. Если так, то ответ buti-oxa является самым простым способом. просто будьте осторожны с очисткой ваших поплавков.

Ответ 4

Добавление style="float: left;" в ul приведет к тому, что ul будет растягиваться так же широко, как и самый широкий элемент. Однако следующий элемент будет помещен справа от него. Добавление style="clear: left;" в следующий элемент поместит следующий элемент после ul.

Попробуйте

Смотрите документацию на float и clear.

Ответ 5

Лучший способ решить это, не испортив стиль существующего макета, - это обернуть ul и li в div с помощью display: inline-block

   <div id='dropdown_tab' style='display: inline-block'>dropdown
        <ul id='dropdown_menu' style='display: none'>
            <li>optoin 1</li>
            <li>optoin 2</li>
            <li id='option_3'>optoin 3
                <ul id='dropdown_menu2' style='display: none'>
                    <li>second 1</li>
                    <li>second 2</li>
                    <li>second 3</li>
                </ul>
            </li>
        </ul>
    </div>