HTML UL ширина

Question

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

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

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

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

Answer 1

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

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

Answer 2

Точно так, как сказал 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 - самый простой способ. просто будьте осторожны с очисткой ваших поплавков.

Answer 3

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

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

Answer 4

Лучший способ решить эту проблему, не испортив стиль существующего макета, - это обернуть 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>

Answer 5

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

Попробуйте

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