宽度等于内容[重复]

Question

我在CSS的width属性方面遇到了一些问题。我在div中有一些段落。我想使段落的宽度等于其内容，这样它们的绿色背景看起来就像文本的标签。相反，我得到的是段落继承了div父节点的宽度，后者更宽。

#集装箱{宽度：30%；背景色：灰色；}#容器p{背景色：绿色；}

<div id=“container”><p>示例文本1</p><p>示例文本2</p><p>示例文本3</p></div>

Answer 1

我将宽度设置为最大含量，这对我很有效。

宽度：最大含量；

Answer 2

默认情况下第页标签是块元素，这意味着它们占父元素的100%宽度.

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

#容器p{显示：嵌入式块；}

但它将元素并排放置。

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

#容器p{明确：两者都有；浮动：左；}

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

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

编辑

如果你寻求解决方案显示：内联块但要将每个项目保持在一行中，只需添加一个<br>每个标签后面都有标签：

<div id=“container”><p>示例文本1<p>示例文本2<p>示例文本3</p><br/></div>

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

Answer 3

解决方案内联块强制您插入<br>在每个元素之后。
解决方案浮动强制您使用“clearfix”div包装所有元素。

另一个优雅的解决方案是使用显示：表格用于元素。

使用此解决方案，您不需要手动插入换行符（如内联块)，您不需要在元素周围使用包装器（如使用浮动），如果需要，您可以将元素居中。

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

Answer 4

正在添加显示：嵌入式块；到第页造型应该采用：

http://jsfiddle.net/pyq3C/

#容器p{背景色：绿色；显示：嵌入式块；}

Answer 5

将宽度属性设置为：宽度：fit-content

演示： http://jsfiddle.net/rvrjp7/pyq3C/114

Answer 6

使用 显示：嵌入式块； 不会起作用对于没有空格的长句，如你好你希望你做得好。。。等要解决此问题，请考虑使用word-wrap：断字；相反

它允许长单词在下一行中断并换行。，也脸谱网使用它

例子

#集装箱{宽度：40%；背景色：灰色；溢出：隐藏；边距：10px；}#容器p{显示：嵌入式块；背景色：绿色；}.flex{显示：flex；}#包裹{宽度：30%；背景色：灰色；溢出：隐藏；边距：10px；}#包裹p{word-wrap：断字；背景色：绿色；}

<h1>显示：嵌入式块</h1><div class='flex'><div id=“container”><h5>带空格</h5><p>示例文本1示例文本1样例文本1示例文字1示例文本一示例文字1样例文本一示例文本1</p></div><div id=“container”><h5>无规范（不起作用）</h5><p>你好你好你希望你做得好你好你好你希望你做得好你好你好你希望你做得好</p></div></div><h1>word-wrap：断字</h1><div class='flex'><div id=“wrap”><h5>带空格</h5><p>示例文本1示例文本1样例文本1示例文字1示例文本一示例文字1样例文本一示例文本1</p></div><div id=“wrap”>没有规范（工作中）</p></div></div>

Answer 7

设置显示：内联块然后调整边距。

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

Answer 8

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

.容器{显示：flex；弯曲方向：柱；对齐项目：柔性启动；}

柔性起动将根据其内容自动调整子项的宽度。

Answer 9

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

1） 显示：嵌入式块：

http://jsbin.com/feneni/edit？html，css，js，输出

取消对行的注释

浮动：左；清除：两者

您将发现父容器已折叠。

2） 使用显示：表格

http://jsbin.com/dujowep/edit？html，css，js，输出

Answer 10

尝试使用<span>元素。或者如果你愿意，试试显示：内联

Answer 11

如果您正在使用显示：柔性无论出于何种原因和需要，在Edge/IE等浏览器上，您都可以使用：

显示：内联-灵活

约97%的浏览器支持内联flex。

Answer 12

尽管使用显示：内联块。当子元素的宽度设置为时，我的div将填充屏幕宽度%父级的。如果其他人正在寻找解决方案，并且不介意使用屏幕比例而不是父比例，请替换%具有大众汽车宽度（视口宽度），或甚高频高度（视口高度）。

Answer 13

只需使用display:table；在你的案子上。

Answer 14

您可以这样使用CSS属性：

div公司{显示：继承；}

我希望这能有所帮助。