要让 <div>
出现在同一行里,同时能固定每一个 <div>
的宽度。如果设置 display: inline;
的话,宽度就不一致了;而用 display: inline-block;
又会自动换行无法叠加。我想要得到的效果是,在同一行内叠加,超过了就开启 scroll
继续叠加。
对啊,为什么不用float?
inline-block自动换行?不是吧,是你用中文输入法输入中间的横线了吧。。。还是你的div调了100%的宽度?
inline-block
父元素 强制不换行,
或者float
再或者position绝对定位写死
明明就有float可用,为何偏要折腾display
直接用float属性呀
根据我所理解的题主的意图及情况,写了个 demo(忽视兼容性问题)。其中,关键性代码如下所示:
<!-- 样式代码 -->
<style>
#elementsInline {
width: 300px; /* 设置宽度以内容超出时出现滚动条 */
overflow: auto;
white-space: nowrap; /* 使内部元素在一行显示 */
}
#elementsInline span {
display: inline-block;
width: 100px;
white-space: normal; /* 使文字可以正常换行 */
}
</style>
<!-- 内容结构 -->
<div id="elementsInline">
<span></span>
<span></span>
<span></span>
...
</div>