CSS: установить ширину, равную содержимому

Я испытываю некоторые проблемы с свойством width для CSS. У меня есть несколько абзацев внутри div. Я хотел бы установить ширину абзацев, равную их содержимому, чтобы их зеленый фон выглядел как метка для текста. Вместо этого я получаю, что абзацы наследуют ширину div div node, которая шире. Что я должен делать? Спасибо.

HTML:

<div id="container">
    <p>Sample Text 1</p>
    <p>Sample Text 2</p>
    <p>Sample Text 3</p>
</div>

CSS

#container {
    width: 30%;
    background-color: grey;
}
#container p{
    background-color: green;
}

Ответы

Ответ 1

По умолчанию теги p представляют собой элементы block, что означает, что они принимают 100% родительского width.

Вы можете изменить свое свойство отображения с помощью:

#container p {
   display:inline-block;
}

Но он ставит элементы бок о бок.

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

#container p {
   clear:both;
   float:left;
}

(Если вы используете float и должны очищать после плавающих элементов, см. эту ссылку для разных методов: http://css-tricks.com/all-about-floats/)суб >

Демо: http://jsfiddle.net/CvJ3W/5/

Изменить

Если вы решите использовать решение с display:inline-block, но хотите сохранить каждый элемент в одной строке, вы можете просто добавить тег <br> после каждого из них:

<div id="container">
  <p>Sample Text 1</p><br/>
  <p>Sample Text 2</p><br/>
  <p>Sample Text 3</p><br/>
</div>

Новое демо: http://jsfiddle.net/CvJ3W/7/

Ответ 2

Я установил ширину как max-content, и это сработало для меня.

width: max-content;

Ответ 3

Добавление display: inline-block; к стилю p должно взять его:

http://jsfiddle.net/pyq3C/

#container p{
    background-color: green;
    display: inline-block;
}

Ответ 4

Установите display:inline-block, а затем отрегулируйте свои поля.

скрипка здесь: http://jsfiddle.net/Q2MrC/

Ответ 5

Решение с inline-block заставляет вас вставлять <br> после каждого элемента.
Решение с float заставляет вас обернуть все элементы с помощью div clearfix.

Другим элегантным решением является использование display: table для элементов.

С помощью этого решения вам не нужно вставлять разрывы строк вручную (например, с помощью inline-block), вам не нужна обертка вокруг ваших элементов (например, с помощью float), и вы можете центрировать свой элемент, если вам нужно.

http://jsfiddle.net/8md3jy4r/3/

Ответ 7

Попробуйте использовать элемент <span>. Или, если хотите, попробуйте display:inline

Ответ 8

Несмотря на использование display: inline-block. Мой div заполнит ширину экрана, когда элементы children имеют ширину, равную % родительского элемента. Если кто-то еще ищет решение для этого и не возражает против использования пропорции экрана вместо родительской пропорции, замените % на vw для ширины (ширина видового экрана) или vh для высоты (высота видового экрана).