宽度等于内容

loading...


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>
13回答

  • 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 (高度(视口高度)) .


  • 4

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


  • 0

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

    display:inline-flex

    With ~97% browser support for inline-flex.


  • 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>
    

loading...

评论

暂时没有评论!