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

Question

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

Я испытываю некоторые проблемы со свойством ширины CSS. У меня есть несколько абзацев внутри 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>

422 13

css width

13 ответов:

Comments

Ничего не найдено.

DaniP · Accepted Answer · 2016-07-27 17:28:23

по умолчанию 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/

Edit

если вы идете на решение с display:inline-block но хотите сохранить каждый элемент в одной строке, вы можете просто добавить   тег после каждого из них:
<div id="container">
 Sample Text 1 
 Sample Text 2 
 Sample Text 3 
</div>
новая демонстрация: http://jsfiddle.net/CvJ3W/7/

Sarneet Kaur · Accepted Answer · 2017-08-03 22:47:42

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

width: max-content;

Stuart Kershaw · Accepted Answer · 2013-12-04 21:03:19

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

http://jsfiddle.net/pyq3C/
#container p{
    background-color: green;
    display: inline-block;
}

djxak · Accepted Answer · 2016-05-20 20:57:56

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

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

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

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

sn3ll · Accepted Answer · 2013-12-04 21:08:31

Set display:inline-block а затем настроить поля.

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

RVRJ · Accepted Answer · 2017-08-23 15:45:18

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

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

satyam kumar · Accepted Answer · 2016-06-30 20:27:15

вы можете использовать любой из ниже :-

1) дисплей: inline-block:

http://jsbin.com/feneni/edit?html, css, js, выход

раскомментируйте строку
 float:left;
 clear:both 
и вы обнаружите, что родительский контейнер рухнул.

2) с помощью display: table

http://jsbin.com/dujowep/edit?html, css, js, выход

Testare · Accepted Answer · 2013-12-04 21:06:27

попробуйте использовать  элемент. Или, если вы предпочитаете, попробуйте display:inline

Nacho Coloma · Accepted Answer · 2018-02-06 23:28:28

вы можете использовать flex для достижения этой цели:
.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
flex-start автоматически отрегулирует ширину детей к их содержанию.

Chris Hayes · Accepted Answer · 2017-08-12 14:40:04

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

was · Accepted Answer · 2018-03-30 15:28:23

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

youngrrrr · Accepted Answer · 2018-06-08 03:06:13

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

дисплей: inline-flex

С поддержкой браузера ~97% для встроенного гибкого трубопровода.

Liam · Accepted Answer · 2018-06-16 19:30:08

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

#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>