it-swarm.com.ru

Ширина равна содержанию

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

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

#container p {
  background-color: green;
}
<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>

61
user3067088

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

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

#container p {
   display:inline-block;
}

Но это ставит элементы рядом.

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

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

(Если вы используете float и вам нужно очистить после 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/

106
DaniP

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

width: max-content;

53
Sarneet Kaur

Добавление display: inline-block; к стилю p должно привести к следующему:

http://jsfiddle.net/pyq3C/

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

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

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

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

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

6
Ruslan Stelmachenko

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

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

4
sn3ll

установить атрибут width как: width: fit-content

demo:http://jsfiddle.net/rvrjp7/pyq3C/114

4
RVRJ

Вы можете использовать любой из следующих: -

1) дисплей: встроенный блок:

http://jsbin.com/feneni/edit?html,css,js,output

Раскомментируйте строку

 float:left;
 clear:both 

и вы обнаружите, что родительский контейнер разрушен.

2) Использование дисплея: таблица

http://jsbin.com/dujowep/edit?html,css,js,output

4
satyam kumar

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

1
Testare

Вы можете использовать flex для достижения этой цели:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

flex-start автоматически настроит ширину дочерних элементов в соответствии с их содержимым.

1
Nacho Coloma

просто используйте display: table; по вашему делу.

0
was

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

0
Chris Hayes

Если вы используете display: flex по какой-либо причине и нуждаетесь в браузерах, таких как Edge/IE, вы можете вместо этого использовать:

дисплей: inline-flex

С поддержкой браузеров ~ 97% для inline-flex.

0
youngrrrr

Используя display:inline-block;, он будет работать только для правильного предложения с пробелами like

#container {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
    display:inline-block;
    background-color: green;
}
<h5>Correct sentence with spaces </h5>
<div id="container">
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<h5>No specaes (not working )</h5>
<div id="container">
    <p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>
</div>

Почему бы не использовать Word-wrap: break-Word;? это сделано для того, чтобы длинные слова могли разбиваться и переноситься на следующую строку.

#container {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
   Word-wrap: break-Word;
    background-color: green;
}
<h5> Correct sentence with spaces </h5>
<div id="container">
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<h5>No specaes</h5>
<div id="container">
    <p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>
</div>

0
Liam