首页 文章

宽度等于内容

提问于
浏览 次
57

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

13 回答

  • 4

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

    回复于
  • 0

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

    display：inline-flex

    With ~97% browser support for inline-flex.

    回复于
  • 1

    默认情况下 p 标签是 block 元素，这意味着它们占用了父级 width 的100％ .

    您可以使用以下命令更改其display属性：

    #container p {
   display:inline-block;
}

    但它将这些要素并排放在一起 .

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

    #container p {
   clear:both;
   float:left;
}

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

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

    Edit

    如果您使用 display:inline-block 寻求解决方案，但希望将每个项目保留在一行中，则可以在每个项目之后添加 <br> 标记：

    <div id="container">
  <p>Sample Text 1</p>
    
  <p>Sample Text 2</p>
    
  <p>Sample Text 3</p>
    
</div>

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

    回复于
  • 0

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

    width: max-content;

    回复于
  • 6

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

    http://jsfiddle.net/pyq3C/

    #container p{
    background-color: green;
    display: inline-block;
}
    回复于
  • 4

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

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

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

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

    回复于
  • 1

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

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

    回复于
  • 0

    你可以使用以下任何一种： -

    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

    回复于
  • 42

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

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

    回复于
  • 96

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

    回复于
  • 4

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

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

    flex-start 会自动调整儿童的宽度到他们的内容 .

    回复于
  • 6

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

    回复于
  • 0

    Using display:inline-block; 它只适用于 spaces 之类的正确句子

    #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>
    回复于

相关问题