前端 - <div> 使用 inline 无法设置宽度，使用 inline-block 则会自动换行，怎么能够一直往界面右边叠加？

Question

要让 <p> 出现在同一行里，同时能固定每一个 <p> 的宽度。如果设置 display: inline; 的话，宽度就不一致了；而用 display: inline－block; 又会自动换行无法叠加。我想要得到的效果是，在同一行内叠加，超过了就开启 scroll 继续叠加。

Answer 1

根据我所理解的题主的意图及情况，写了个 demo（忽视兼容性问题）。其中，关键性代码如下所示：

<!-- 样式代码 -->
<style>
    #elementsInline {
        width: 300px;           /* 设置宽度以内容超出时出现滚动条 */
        overflow: auto;
        white-space: nowrap;    /* 使内部元素在一行显示 */
    }
    
    #elementsInline span {
        display: inline-block;
        width: 100px;
        white-space: normal;    /* 使文字可以正常换行 */
    }
</style>

<!-- 内容结构 -->
<p id="elementsInline">
    <span></span>
    <span></span>
    <span></span>
    ...
</p>

Answer 2

inline-block
父元素 强制不换行，

或者float

再或者position绝对定位写死

Answer 3

对啊，为什么不用float？
inline-block自动换行？不是吧,是你用中文输入法输入中间的横线了吧。。。还是你的p调了100%的宽度？

Answer 4

明明就有float可用，为何偏要折腾display

Answer 5

直接用float属性呀