CSS 溢出不适用于 display flex 或 block

【问题标题】：CSS Overflow not working with display flex or blockCSS 溢出不适用于 display flex 或 block
【发布时间】：2021-11-28 21:40:09
【问题描述】：

我正在制作一个顶部有固定标题的网页。标题有徽标、一些类别和一个搜索按钮。这是code for header。您将看到类别：家庭、新闻、电影...包含所有这些类别的div 的父级将属性overflow-x 设置为auto，并且display 也是flex。但是当我尝试添加更多类别或减小视口宽度时，它们会被添加到下一行但是它们应该被添加到同一行中，并且应该沿着 x 轴出现滚动条。 请注意，我使用display: grid 作为标题元素。

我能知道我在这里犯了什么错误吗？ 提前致谢。

【问题讨论】：

  • 一个错误是您还必须将父级设置为 display:flex。作为 ul{ display:flex; 的示例溢出-x:auto;}
  • @nontechguy，它不起作用。如果是这样，在小视口中，您会发现 header 没有滚动，而 ul 正在滚动。

标签： html css flexbox grid overflow


【解决方案1】：

我认为它可以帮助你。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
}
html, body{
    height: 100%;
    width: 100%;
    background-color: white;
    color: black;
    font-size: 1rem;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow-x: auto;
    background-color: white;
    box-shadow: 0 1px 20px rgb(0,0,0,0.15);
}
header::-webkit-scrollbar {
    width: 0;
    height: 10px;
    background-color: transparent;
}
header::-webkit-scrollbar-thumb {
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: padding-box;
    background-color: #dddddd;
}
.header {
    max-width: unset;
    width: auto;
    display: grid;
    grid-template-columns: 150px min-content min-content 110px;
    grid-column-gap: 20px;
}
header div.logo{
    padding: 0 10px 0 25px;
}
header div.logo-category{
    color: white;
    background-color: rgb(255, 103, 103);
    max-width: 150px;
    border-radius: 5px;
    height: 30px;
    padding: 2px 10px;
    text-align: center;
    align-self: end;
    margin-bottom: 10px;
}
header div.categories{
    background: linear-gradient(225deg, rgb(3, 78, 238), rgb(255, 34, 34));
    margin-left: 15px;
    overflow-x: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
header div.categories>div>nav>ul{
    list-style: none;
    white-space: nowrap;
}
header div.categories>div>nav>ul>li{
    display: inline;
    font-size:25px;
    text-transform: uppercase;
    margin-right: 18px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
header div.categories>div>nav>ul>li.current-tab{
    -webkit-text-fill-color: white;
    padding: 2px 10px;
    border-radius: 5px;
    -webkit-background-clip: unset;
    background: linear-gradient(225deg, rgb(3, 78, 238), rgb(255, 34, 34));
    color: white;
}
header div.search{
    background-color: rgb(0, 38, 255);
    color: white;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 20px rgb(0,0,0,0.15);
    margin: 10px 30px;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
}
header div.search:hover{
    color: rgb(0, 38, 255);
    background-color: white;
}
<header>
    <div class="header">
      <div class="logo">
          <svg width="100" height="61" viewBox="0 0 403 244" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g filter="url(#filter0_d)">
              <path d="M120.6 54H184.2C199.4 54 212.8 56.9333 224.4 62.8C236.133 68.5333 245.2 76.6667 251.6 87.2C258.133 97.7333 261.4 110 261.4 124C261.4 138 258.133 150.267 251.6 160.8C245.2 171.333 236.133 179.533 224.4 185.4C212.8 191.133 199.4 194 184.2 194H120.6V54ZM182.6 167.4C196.6 167.4 207.733 163.533 216 155.8C224.4 147.933 228.6 137.333 228.6 124C228.6 110.667 224.4 100.133 216 92.4C207.733 84.5333 196.6 80.6 182.6 80.6H153V167.4H182.6Z" fill="url(#paint0_linear)"/>
              <path d="M355 194L354.8 110L313.6 179.2H299L258 111.8V194H227.6V54H254.4L306.8 141L358.4 54H385L385.4 194H355Z" fill="url(#paint1_linear)"/>
              <path d="M55.6 80.4H10.8V54H132.8V80.4H88V194H55.6V80.4Z" fill="url(#paint2_linear)"/>
              </g>
              <defs>
              <filter id="filter0_d" x="0.800003" y="54" width="394.6" height="170" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
              <feOffset dy="20"/>
              <feGaussianBlur stdDeviation="5"/>
              <feComposite in2="hardAlpha" operator="out"/>
              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
              </filter>
              <linearGradient id="paint0_linear" x1="270" y1="122" x2="122.5" y2="122" gradientUnits="userSpaceOnUse">
              <stop stop-color="#CC78FF" stop-opacity="0.15"/>
              <stop offset="1" stop-color="#FF008A"/>
              </linearGradient>
              <linearGradient id="paint1_linear" x1="393.5" y1="122" x2="211" y2="122" gradientUnits="userSpaceOnUse">
              <stop stop-color="#011AFF" stop-opacity="0.15"/>
              <stop offset="1" stop-color="#FF00E5"/>
              </linearGradient>
              <linearGradient id="paint2_linear" x1="152.5" y1="122" x2="10" y2="122" gradientUnits="userSpaceOnUse">
              <stop stop-color="#FF37AF" stop-opacity="0.15"/>
              <stop offset="1" stop-color="#FF0000"/>
              </linearGradient>
              </defs>
              </svg>                
      </div>
      <div class="logo-category">Home</div>
      <div class="categories">
          <div>
              <nav>
                  <ul>
                      <li class="current-tab"><i class="fa fa-home"></i> Home</li>
                      <li><i class="fa fa-newspaper-o"></i> News</li>
                      <li><i class="fa fa-film"></i> Movies</li>
                      <li><i class="fa fa-microchip"></i> Technology</li>
                  </ul>
              </nav>
          </div>
      </div>
      <div class="search"><i class="fa fa-search"></i></div>
    </div>
  </header>

【讨论】：

  • 感谢您的回答，但像您说的那样更改代码不会像我希望的标题那样。
  • 我明白你的意思。我可以使用 display: flex 吗？
  • @SatyamMishra，我认为你的问题是，如果你不使用grid-template-columns: 115px min-width auto 100px，整个项目都左对齐，对吧？
  • 你是对的，项目左对齐
  • 所以我想用 display: flex 来解决这个问题。
【解决方案2】：

这是我认为对您有用的解决方案。当视口尺寸减小时，导航项可以滚动。

CSS

.body{
  background-color: #F2B84B;
}
.logo, .search{
  color:#fff;
  font-size:2rem;
  padding:10px;
  vertical-align: middle;
  line-height: normal;
}
.primary{
  background-color:#04B2D9
}
nav{
  display:flex;
  justify-content:space-between;
  font-family: 'Anton', sans-serif;
}
nav ul{
  display:flex;
  overflow-x:auto;
  
}
nav ul li {
  list-style: none;
  padding:0 10px;
  text-transform: uppercase;
  font-size:2rem;
}

.btn{
  color:#BF5B04;
  background-color:#F28705;
  border:1px solid #592202;
  margin:0 10px;
}

HTML

<html>
  <head></head>
  <body class="body">
    <nav class="primary">
      <div class="logo">LOGO</div>
      <ul>
        <li class="btn">Home</li>
        <li class="btn">Movies</li>
        <li class="btn">Technology</li>
        <li class="btn">Games</li>
        <li class="btn">Sport</li>
        <li class="btn">Lifestyle</li>
        <li class="btn">Education</li>
      </ul>
      <div class="search">SEARCH</div>
    </nav>
  </body>
</html>

这里的工作代码： https://codepen.io/non_tech_guy/pen/PoKoYVN

此外，当您变得具体时，您的 css 可能会变得难以阅读，我认为使用尽可能少的具体性来完成任务是一种很好的做法。这是您的代码示例header div.categories&gt;div&gt;nav&gt;ul&gt;li.current-tab

【讨论】：

  • 绝对不行。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-12-02
  • 1970-01-01
  • 2019-01-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode