CSS 宽度等于内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20383622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Width equal to content
提问by user3067088
I'm experiencing some trouble with the width property of CSS. I have some paragraphs inside a div. I'd like to make the width of the paragraphs equal to their content, so that their green background looks like a label for the text. What I get instead is that the paragraphs inherit the width of the div father node which is wider.
我在使用 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>回答by DaniP
By default ptags are blockelements, which means they take 100% of the parent width.
默认情况下p标签是block元素，这意味着它们占据父元素的 100% width。
You can change their display property with:
您可以通过以下方式更改其显示属性：
#container p {
display:inline-block;
}
But it puts the elements side by side.
但它将元素并排放置。
To keep each element on its own line you can use:
要将每个元素保持在自己的行上，您可以使用：
#container p {
clear:both;
float:left;
}
(If you use float and need to clear after floated elements, see this link for different techniques: http://css-tricks.com/all-about-floats/)
（如果您使用浮动并需要清除浮动元素，请参阅此链接以了解不同的技术：http: //css-tricks.com/all-about-floats/）
Demo: http://jsfiddle.net/CvJ3W/5/
演示：http: //jsfiddle.net/CvJ3W/5/
Edit
编辑
If you go for the solution with display:inline-blockbut want to keep each item in one line, you can just add a <br>tag after each one:
如果您寻求解决方案，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>
New demo: http://jsfiddle.net/CvJ3W/7/
回答by Sarneet Kaur
I set width as max-content and it worked for me.
我将宽度设置为 max-content 并且它对我有用。
width: max-content;
width: max-content;
回答by Ruslan Stelmachenko
The solution with inline-blockforces you to insert <br>after each element.
The solution with floatforces you to wrap all elements with "clearfix" div.
解决方案inline-block强制您<br>在每个元素之后插入。
解决方案float强制您使用“clearfix”div 包装所有元素。
Another elegant solution is to use display: tablefor elements.
另一个优雅的解决方案是使用display: tablefor 元素。
With this solution you don't need to insert line breaks manually (like with inline-block), you don't need a wrapper around your elements (like with floats) and you can center your element if you need.
使用此解决方案，您无需手动插入换行符（例如 with inline-block），您不需要在元素周围使用包装器（例如浮动），并且您可以根据需要将元素居中。
回答by Stuart Kershaw
Adding display: inline-block;to the pstyling should take of it:
添加display: inline-block;到p样式应该采取它：
#container p{
background-color: green;
display: inline-block;
}
回答by RVRJ
回答by sn3ll
Set display:inline-blockand then adjust your margins.
设置display:inline-block然后调整您的边距。
fiddle here: http://jsfiddle.net/Q2MrC/
在这里小提琴：http: //jsfiddle.net/Q2MrC/
回答by satyam kumar
You can use either of below :-
您可以使用以下任何一种：-
1) display : inline-block :
1）显示：内联块：
http://jsbin.com/feneni/edit?html,css,js,output
http://jsbin.com/feneni/edit?html,css,js,output
Uncomment the line
取消注释该行
float:left;
clear:both
and you will find that parent container has collapsed.
你会发现父容器已经折叠。
2) Using display : table
2）使用显示：表
回答by Shrroy
Usingdisplay:inline-block;it will work only for a correct sentence with spaceslike
使用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>Why not using word-wrap: break-word;? it's made to allow long words to be able to break and wrap onto the next line.
为什么不使用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>回答by Nacho Coloma
You can use flex to achieve this:
您可以使用 flex 来实现这一点：
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
flex-startwill automatically adjust the width of children to their contents.
flex-start将根据其内容自动调整子项的宽度。
回答by youngrrrr
If you are using display: flexfor whatever reason and need on browsers like Edge/IE, you can instead use:
如果您display: flex出于某种原因在 Edge/IE 等浏览器上使用并需要，您可以改为使用：
display: inline-flex
显示：inline-flex
