关于css：宽度等于内容


Width equal to content

我在使用css的width属性时遇到一些问题。我在一个分区中有一些段落。我想使段落的宽度等于它们的内容，这样它们的绿色背景看起来就像是文本的标签。相反，我得到的是段落继承了更宽的DIV父节点的宽度。

1
2
3
4
5
6
7
8
#container {
  width: 30%;
  background-color: grey;
}

#container p {
  background-color: green;
}
1
2
3
4
5
6
7
8
9
  <p>
Sample Text 1
</p>
  <p>
Sample Text 2
</p>
  <p>
Sample Text 3
</p>

相关讨论

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

您可以使用以下选项更改其显示属性：

1
2
3
#container p {
   display:inline-block;
}

但它将元素并排放置。

要使每个元素保持在自己的行上，可以使用：

1
2
3
4
#container p {
   clear:both;
   float:left;
}

(如果使用float并需要在浮动元素之后清除，请参见此链接了解不同的技术：http://css tricks.com/all about floats/)

演示：http://jsfiddle.net/cvj3w/5/

编辑

如果您选择使用display:inline-block的解决方案，但希望将每个项目保持在一行中，则可以在每个项目之后添加标记：

1
2
3
4
5
6
7
8
9
  <p>
Sample Text 1
</p><br/>
  <p>
Sample Text 2
</p><br/>
  <p>
Sample Text 3
</p><br/>

新演示：http://jsfiddle.net/cvj3w/7/

相关讨论

我将宽度设置为最大内容，这对我很有用。

width: max-content;

相关讨论

在p样式中添加display: inline-block;应考虑到：

http://jsfiddle.net/pyq3c/

1
2
3
4
#container p{
    background-color: green;
    display: inline-block;
}
相关讨论

inline-block的解决方案迫使您在每个元素后面插入。使用float的解决方案强制您使用"clearfix"分区包装所有元素。

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

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

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

将宽度属性设置为：宽度：适合内容

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

您可以使用以下任一选项：

1)显示：内联块：

http://jsbin.com/feneni/edit？HTML、CSS、JS、输出

取消对行的注释

4

您将发现父容器已折叠。

2)使用显示器：表

http://jsbin.com/dujowep/edit？HTML、CSS、JS、输出

设置display:inline-block，然后调整您的利润。

请点击：http://jsfiddle.net/q2mrc/

您可以使用flex来实现这一点：

1
2
3
4
5
.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

flex-start将自动根据内容调整儿童的宽度。

尝试使用元素代替。或者，如果你愿意，可以试试display:inline。

相关讨论

使用display:inline-block;，它只适用于带有空格的正确句子，如

1
2
3
4
5
6
7
8
9
10
#container {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
    display:inline-block;
    background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
<h5>Correct sentence 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>

<h5>No specaes (not working )</h5>

    <p>
SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa
</p>

为什么不使用word-wrap: break-word;？这是为了让长单词能够在下一行中断开和换行。

1
2
3
4
5
6
7
8
9
10
#container {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
   word-wrap: break-word;
    background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
<h5> Correct sentence 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>

<h5>No specaes</h5>

    <p>
SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa
</p>

如果您出于任何原因使用display: flex，并且需要在edge/ie等浏览器上使用，则可以使用：

display: inline-flex

有约97%的浏览器支持嵌入式flex。

只需使用显示器：桌子；在你的箱子上。

相关讨论

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