Question

我在使用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>

Answer 1

默认情况下，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/

Answer 2

我将宽度设置为max-content，它对我有用。

width: max-content;

Answer 3

将display: inline-block;添加到p样式应该采用它：

http://jsfiddle.net/pyq3C/

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

Answer 4

inline-block的解决方案会强制您在每个元素后插入<br> 使用float的解决方案强制您使用＆＃34; clearfix＆＃34;来包装所有元素。格。

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

使用此解决方案，您不需要手动插入换行符（例如使用inline-block），您不需要在元素周围使用包装（如浮点数），您可以将元素，如果你需要。

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

Answer 5

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

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

Answer 6

您可以使用以下任一方式： -

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

Answer 7

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

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

Answer 8

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

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

flex-start会自动将儿童的宽度调整为其内容。

Answer 9

请尝试使用<span>元素。或者，如果您愿意，请尝试<span>

Answer 10

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

Answer 11

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

显示：inline-flex

With ~97% browser support for inline-flex.

Answer 12

使用 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>

Answer 13

您可以像这样使用CSS属性：

div {
    display: inherit;
}

我希望这会有所帮助。

宽度等于内容

13 个答案: