Автоматическая подгонка ширины li к тексту?

Question

Можно ли в любом случае автоматически подогнать ширину тега

к ширине текста, который он содержит с помощью CSS?

Я разрабатываю веб-сайт, который использует собственную CMS (и у меня нет доступа к коду), поэтому я ограничен в возможностях дизайна.

Решения Javascript, которые будут работать с тегом

без необходимости непосредственного редактирования каких-либо свойств списка, также будут работать.

Answer 1

<li> является элементом уровня блока, поэтому значения по умолчанию должны быть максимально широкими.

Чтобы «сжать» размер содержимого, попробуйте добавить его:

li {
    float:left;
    clear:left;
}

Это может сделать то, что вы ищете.

Если вы хотите, чтобы <li> сидели рядом друг с другом, вы можете попробовать:

ul {
    clear: left;  /* I like to put the clear on the <ul> */
}
li {
    float: left;
}

OR

li {
    display: inline
}

Делая это inline убирает его статус уровня блока, поэтому он действует как <span> или любой другой встроенный элемент.

Answer 2

Как уже сказал @willoller, элемент li является элементом блочного уровня, но кроме плавающего элемента вы также можете использовать:

li {
    display: inline;
}

Answer 3

РЕДАКТИРОВАТЬ: К сожалению, следующее решение по-разному отображается в разных браузерах.

Чтобы ни один другой элемент не попал в список, я использовал это:

ul {
    white-space: pre-line;
    margin: -25px 0 0;   /* to compensate the pre-line down-shift */ 
}
ul li {
    display: inline-block;
}

Единственное CSS-решение, которое хорошо сработало для меня.

Answer 4

ul { display: inline }

решит все ваши проблемы одновременно.

Answer 5

Добавление display: inline; CSS в блок <ul> отлично работает для меня, без нежелательных эффектов.

Answer 6

Ни один из предыдущих ответов не работает правильно для меня, поэтому я использовал следующий подход:

1. Добавить стиль "float: left" к моему
2. Окружить

Answer 7

В стандартных совместимых браузерах используйте min-width вместо width. В IE 6 width делает то, что вы описываете.

Answer 8

Вы можете использовать em вместо пикселей, чтобы указать ширину вашего элемента. Em примерно соответствует ширине буквы «m» в шрифте по умолчанию. Играйте с числом, кратным количеству символов в вашем li, пока у вас не будет ширины em, которая визуально привлекательна.

Answer 9

Если у вас есть идентификатор тега

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