宽度等于内容

我遇到了一些问题与 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>

401085 次浏览
小开

将 display: inline-block;添加到 p样式应该可以解决这个问题:

Http://jsfiddle.net/pyq3c/

#container p{
background-color: green;
display: inline-block;
}
小开
最佳答案

默认情况下，p标记是 block元素，这意味着它们采用父 width的100% 。

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

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

小开

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

小开

设置 display:inline-block，然后调整边距。

小提琴: http://jsfiddle.net/Q2MrC/

小开

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

另一个优雅的解决方案是对元素使用 display: table。

使用这个解决方案，您不需要手动插入换行符(如 inline-block) ，也不需要元素周围的包装器(如 float) ，并且如果需要，还可以将元素居中。

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

小开

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

1)显示: 内联块:

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

取消注释行

 float:left;
clear:both

你会发现父容器已经崩溃了。

2)使用显示器: 表格

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

小开

我设置宽度为最大内容，它为我工作。

width: max-content;

小开

尽管使用了 display: inline-block。当子元素的宽度设置为父元素的 %时，我的 div 将填充屏幕宽度。如果其他人正在寻找解决方案，并且不介意使用屏幕比例代替父比例，那么就用 vw代替宽度(Viewport Width) ，或者用 vh代替高度(Viewport Height)。

小开

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

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

小开

你可以使用 flex 来实现这一点:

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

flex-start将自动调整子元素的宽度以适应其内容。

小开

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

小开

If you are using display: flex for whatever reason and need on browsers like Edge/IE, you can instead use:

显示: 内联-伸缩

对 inline-flex 的浏览器支持率达到97% 。

小开

对于像 HiHowAreYouHopeYouAreDoingGood...etc这样没有空格的长句，使用 display:inline-block; 没用的来解决这个问题，可以考虑改用 word-wrap: break-word;

它的作用是允许长单词能够在下一行中断开并换行，也可以使用 脸书

例子

#container {
width: 40%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#container p{
display:inline-block;
background-color: green;
}
.flex{
display: flex;
}


#wrap {
width: 30%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#wrap p{
word-wrap: break-word;
background-color: green;
}
<h1> display:inline-block;</h1>
<div class='flex'>


<div id="container">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>


<div id="container">
<h5>No specaes (not working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>








<h1>  word-wrap: break-word;</h1>
<div class='flex'>


<div id="wrap">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>


<div id="wrap">
<h5>No specaes (working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>

小开

你可以这样使用 CSS 属性:

div {
display: inherit;
}

希望这个能帮上忙。


提交答案