html盒子里面的盒子怎么加横向滚动条

原创于 2022-05-20 08:00:55 发布 · 601 阅读

CC 4.0 BY-SA版权

文章标签：

这是一个关于前端布局的示例，展示了如何使用CSS实现横向滚动和元素排列。内容包括使用`display: inline-block`和`white-space: nowrap`创建一排不换行的元素，以及通过设置`overflow-x`来实现水平滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="home">
      <div id="b">哈尔哈哈从安好了大货拉链打打了巨大</div>
      <div id="b">安抚床擦按副部级，按成本法吉萨会触发，j'a'shjash</div>
      <div id="b">吧，安徽，等哈京哈加家啊大家啊吧</div>
      <div id="b">就，是，的好处是厂家生产</div>
      <div id="b">撒狗粮几个女生。啦</div>
      <div id="b">是分公司工作上的干点啥不好的现代</div>
      <div id="b">试点工作部队政治部还是在</div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
    #home{
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;

    }
    #b{
        width: 12.5rem;
        height: 6.25rem;
        border: 1px solid red;
        background-color: red;
        margin-left: .3125rem;
        overflow-x: auto;
        display: inline-block;
    }
</style>