宽度等于内容

我在使用CSS的width属性时遇到了一些麻烦 . 我在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>

回答(13)

3 years ago

默认情况下 p 标签是 block 元素,这意味着它们占用了父级 width 的100% .

您可以使用以下命令更改其display属性:

#container p {
   display:inline-block;
}

但它将这些要素并排放在一起 .

要将每个元素保留在自己的行上,您可以使用:

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

(如果您使用浮动并需要在浮动元素后清除,请参阅此链接以了解不同的技术:http://css-tricks.com/all-about-floats/)

演示: http://jsfiddle.net/CvJ3W/5/

Edit

如果您使用 display:inline-block 寻求解决方案,但希望将每个项目保留在一行中,则可以在每个项目之后添加 <br> 标记:

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

新演示: http://jsfiddle.net/CvJ3W/7/

3 years ago

我将宽度设置为max-content,它对我有用 .

width: max-content;

3 years ago

display: inline-block; 添加到 p 样式应该是它:

http://jsfiddle.net/pyq3C/

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

3 years ago

inline-block 的解决方案强制您在每个元素后插入 <br> .
float 的解决方案强制您使用"clearfix" div包装所有元素 .

另一个优雅的解决方案是使用 display: table 作为元素 .

使用此解决方案,您无需手动插入换行符(例如 inline-block ),您不需要在元素周围使用包装(如浮点数),如果需要,可以将元素置于中心位置 .

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

3 years ago

设置 display:inline-block ,然后调整边距 .

在这里摆弄:http://jsfiddle.net/Q2MrC/

3 years ago

你可以使用以下任何一种: -

1)显示:内联块:

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

取消注释该行

float:left;
 clear:both

你会发现父容器已折叠 .

2)使用display:table

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

3 years ago

将width属性设置为:width:fit-content

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

3 years ago

请尝试使用 <span> 元素 . 或者如果您愿意,请尝试 display:inline

3 years ago

您可以使用flex来实现此目的:

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

flex-start 会自动调整儿童的宽度到他们的内容 .

3 years ago

尽管使用 display: inline-block . 当子元素的宽度设置为父级的 % 时,我的div将填充屏幕宽度 . 如果其他人正在寻找解决方案,并且不介意使用屏幕比例而不是父比例,则将 % 替换为 vw (宽度(视口宽度))或 vh (高度(视口高度)) .

3 years ago

只需使用display:table;在你的情况下 .

3 years ago

如果您在Edge / IE等浏览器上出于某种原因和需要使用 display: flex ,则可以使用:

display:inline-flex

With ~97% browser support for inline-flex.

3 years ago

Using display:inline-block; 它只适用于 spaces 之类的正确句子

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