记录一下布局--宽度溢出导致的问题

@大熊

已于 2023-06-21 16:13:03 修改

阅读量110

点赞数

分类专栏：笔记文章标签： css css3 html

于 2022-07-23 16:52:56 首次发布

本文链接：https://blog.csdn.net/qq_51558433/article/details/125949435

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一个div.box中有两个div.left和.right，给.box设置display:flex,设置一个背景
.left也设置flex
.left的div中有10个li元素每个li元素的宽度是110px，一共是1100px
.right里是一些字符串
当大屏的时候没啥问题，但是小缩小浏览器就会看到不是都有背景

原因：
.box（.box表示<div class=“box”>）盒子,里面有10个li元素，每个li的宽度是110px，一共是1100px，.box的宽度默认是父元素的100%，.box的父元素是.header元素，默认也是父元素的100%，.header的宽度是body，body默认是视口的宽度，我们把浏览器缩小，此时浏览器视口的宽度是800px，然后body的宽度也是800px。但是10li元素的的宽度是1100px，溢出了，由于我们设置的颜色在.box上，所以溢出的部分没有显示背景。

 <style>
      .box {
        display: flex;
        justify-content: space-between;
        background-color: #aff;
        height: 80px;
      }
      .left {
        height: 80px;
      }
      .right {
        height: 80px;
      }
      ul {
        overflow: hidden;
        padding: 0;
        margin: 0;
        display: flex;
        list-style: none;
      }
      li {
        padding: 0 40px;
        height: 80px;
      }
    </style>
  </head>
  <body>
      <div class="box">
        <div class="left">
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
          </ul>
        </div>
        <div class="right">1231232131212321</div>
      </div>
  </body>

效果如下
在这里插入图片描述
解决
给.box添加一个min-width,他的宽度要大于.box的内容，因为我们知道10个li的宽度了

  .box {
        display: flex;
        justify-content: space-between;
        background-color: #aff;
        height: 80px;
        min-width: 1300px;
      }

在这里插入图片描述

@大熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一下布局--宽度溢出导致的问题

box（.box表示）盒子,里面有10个li元素，每个li的宽度是110px，一共是1100px，.box的宽度默认是父元素的100%，.box的父元素是.header元素，默认也是父元素的100%，.header的宽度是body，body默认是视口的宽度，我们把浏览器缩小，此时浏览器视口的宽度是800px，然后body的宽度也是800px。但是10li元素的的宽度是1100px，溢出了，由于我们设置的颜色在.box上，所以溢出的部分没有显示背景。...
复制链接

扫一扫

专栏目录