使用CSS调整位置绝对元素的宽度以适应内容
更牢固
我试图将元素放在水平行中，以便可以滚动它们，为此，我制作了一个内部容器和一个外部容器。外容器的宽度是固定的，内容器的宽度应由其内容决定，该宽度可以大于外div。
的HTML
<div id="outer">
<div id="inner">
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
</div>
的CSS
#outer{
width:250px;
position: relative; /* required to make overflow hidden work */
overflow:hidden; /* commented to demonstrate the issue */
background-color: lightgreen;
height: 80px;
}
#inner {
position: absolute;
width: 1000px; /* <- needs to scale to content */
}
ul {
margin: 0;
padding: 0;
}
.item:first-child{
margin-left:0;
}
.item {
width: 100px;
height: 80px;
background-color: lightblue;
margin-left: 10px;
display:inline-block;
}
我正在尝试仅使用CSS来解决此问题，但到目前为止我一直没有成功。对于此问题，浏览器兼容性不是问题。
是）我有的
我想要的是
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
根据里面的内容调整绝对定位元素的宽度
- 2
绝对放置的容器未扩展宽度以适应Flexbox内容
- 3
位置绝对元素上的100％宽度
- 4
动态调整HTML文本输入宽度以适应内容
- 5
父母为什么不调整其宽度以适应内容？
- 6
如何在绝对元素内部自动调整相对元素的宽度
- 7
CSS：绝对改变div宽度的位置
- 8
CSS-使用绝对位置将子级宽度设置为大于父级宽度
- 9
CSS位置绝对不能在元素后面使用
- 10
在CSS中将具有“绝对”位置和未定义宽度的元素居中？
- 11
css {right：0; 位置：绝对；}浏览器调整大小时，元素不应移位
- 12
带有“空白：nowrap”的元素的宽度无法适应子内容
- 13
带有“空白：nowrap”的元素的宽度无法适应子内容
- 14
使用引导程序，添加位置绝对会更改元素的宽度
- 15
如何使用自动布局调整 UILabel 宽度以适应文本？
- 16
CSS：自动调整宽度以包装文本内容？
- 17
如何使用百分比（高度，宽度）尺寸的CSS位置（相对，绝对）？
- 18
CSS调整宽度取决于元素
- 19
绝对位置不适用于宽度为％的元素
- 20
使用 css 拉伸内容以适应桌面页面
- 21
使下拉宽度适应其内容
- 22
CSS-设置固定（或绝对）位置时过渡宽度断开
- 23
CSS（位置：绝对+左侧：50％=最大宽度：50％）？
- 24
如果我使用位置绝对元素重叠
- 25
CSS定位的绝对元素，自动宽度超出父级边界？
- 26
CSS：居中元素具有内联的绝对宽度/高度
- 27
调整宽度以省略内容
- 28
调整宽度内容
- 29
如何在可滚动的div元素内使用CSS绝对位置
我来说两句