html - 有什么办法可以让一个div元素的宽度与其子元素在html中的最大宽度相同？

Question

我的代码如下:

<div id="latest-text">
    <p id="text-wrapper">
      <span style="display: inline-block;" id="title">ABFDFDFJEKJRKEREJRKE</span>
      <span style="display: inline-block;" id="subtitle">GJKJGKEJKEJFKAJKEJRE</span>
    </p>
</div>

我想使 #text-wrapper 元素的宽度大于 #title 或 #subtitle element 的宽度，但是它似乎它的宽度总是与 #latest-text 元素相同。有什么办法可以实现我的目标吗？

Answer 1

是的，你可以做到。将其中一个跨度设置为 block ，并将父 p 标记设置为内联 block 。让第二个跨度内联。

<div id="latest-text">
  <p id="text-wrapper">
    <span id="title">ABFDFDFJEKJRKEREJRKE long, very long, very long</span>
    <span id="subtitle">GJKJGKEJKEJFKAJKEJRE</span>
  </p>
</div>

CSS:

#text-wrapper {
  display: inline-block;
}

span#title {
  display: block;
}

参见 Dabblet:http://dabblet.com/gist/4694336