Question

我需要让元素成为它的全部内容。

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

我的设置是这样的（其中#content应为全宽）：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

（如何）我可以通过纯CSS将元素的宽度设为元素吗？

澄清：

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

Answer 1

将以下样式应用于元素#content

#content{
    white-space: nowrap;
    overflow:auto;
    background-color:blue;
}

您也可以关注@ Rooster的建议，并从overflow-x

中删除#wrapper

检查jsFiddle Demo

Answer 2

你问题中的一些规格对我来说并不是很清楚，但看起来这就是你可以寻找的。

#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;
}

小提琴：

这里有一个JSFiddle供参考。

我可以通过纯CSS制作元素宽度的元素吗？

2 个答案:

小提琴：