css - 我可以通过纯 CSS 使元素的宽度等于其内容的宽度吗？

Question

我需要让一个元素成为其内容的全宽。

我用 whitespace:no-wrap 和 display: inline-block; 做了类似的事情，但它是滚动效果。现在我需要让元素成为它内容的实际宽度；不要滚动查看它们(因为对于具有滚动效果的特定 JS 解决方案，我需要一个带有单个全宽内容项的包装器)。

我的设置是这样的(#content 应该是全 Angular ):

#wrapper {
  width: 500px;
  height: 100px;
  background-color: red;
  overflow-x: scroll;
}
#content {
  white-space: nowrap;
  
  /* this is a false solution, since the contents must be variable */
  width: 1000px;
  /* this is a false solution, since the contents must be variable */
  
  background-color: blue;
}
.inner_item {
  display: inline-block;
  width: 250px;
  height: 100px;
  background-color: green;
}

<div id="wrapper">
  <div id="content">
    <!-- this should be as wide as all of its contents combined -->
    <div class="inner_item"></div>
    <div class="inner_item"></div>
    <div class="inner_item"></div>
    <div class="inner_item"></div>
  </div>
</div>

(如何)我可以通过纯 CSS 使元素的宽度等于其内容的宽度吗？

澄清:

包装子内容项的#content 元素实际上应该溢出其父容器的边缘，而不是滚动其内部内容。因此，如果 #content 中有 5x 1000px 宽的元素，并且我执行 $('#content').width() 我应该得到 5000。这就是我要实现的目标。

Answer 1

我不太清楚你问题中的一些规范，但看起来这就是你要找的东西。

#wrapper, #wrapper * {
    border:0;
    margin:0;
    padding:0;
}
#wrapper {
    background-color:red;
    height:100px;
    overflow-x:scroll;
    width:500px;
}
#content {
    display:inline-block;
    height:100px;
    background-color:blue;
    white-space:nowrap;
}
.inner_item {
    display:inline-block;
    width:250px;
    height:100px;
    background-color:green;
}
.inner_item:first-child {
    margin-left:0;
}

fiddle :

这是一个 JSFiddle供引用。