Question

我试图做静态HTML＆amp;使用flexbox的CSS网页，但我的内容不适合Chrome浏览器中的窗口。我可以水平滚动，所以我的水平空间比浏览器窗口大小更多。

这是显示问题的屏幕截图。包装器两侧的边距相同，但内容不适合浏览器窗口的100％宽度，因此我可以水平滚动，这不是我想要的。

我在Safari中尝试过相同的代码，效果很好。这是Chrome中的flexbox问题还是我错过了什么？感谢。

这是我的HTML：

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS Stylesheets-->
  <link rel="stylesheet" href="css/vendor/normalize.css">
  <link rel="stylesheet" href="css/vendor/font-awesome.css">
  <link rel="stylesheet" href="css/vendor/devicons.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <!-- Header -->
  <header>
    <nav>
      <ul>
        <li><a href="#" class="active">ELEMENT 1</a></li>
        <li><a href="#">ELEMENT 2</a></li>
        <li><a href="#">ELEMENT 3</a></li>
      </ul>
    </nav>
  </header>
  <!-- Main Content -->
  <main>
    <div class="main-wrapper">
      <div class="search-bar">
        <form>
          <input type="text" placeholder="Search">
        </form>
      </div>
    </div>
  </main>
</body>

这是我的SCSS：

/* 2. HEADER */
nav {
  width: 100%;
  text-align: center;
  background-color: $dark-grey;
  & ul {
    max-width: $width;
    margin: auto;
    display: flex;
  }
  & li {
    flex: 1 1 0;
  }
  & a {
    display: block;
    color: $white-alpha;
    padding: 30px 0px;
    transition: color 0.3s ease;
  }
  & a:hover {
    color: $white;
    transition: color 0.3s ease;
  }
  & a.active {
    color: $white;
  }
}

/* 3. MAIN*/
main {
  background-color: $light-grey;
  padding: 30px 0px;
}

.main-wrapper {
  max-width: $width;
  margin: auto;
}

/* 3.1. SEARCH BAR */
.search-bar {
  padding-bottom: 20px;
  & input {
    height: 45px;
    width: 100%;
    border-bottom: 1px solid $medium-grey;
    border-radius: 2px;
    text-indent: 20px;
  }
}

Answer 1

据我所知，你的边距和盒子模型可能是问题+你正在使用&不正确。

您可能还想查看默认页边距并将框模型设置为边框框网站范围。

https://www.paulirish.com/2012/box-sizing-border-box-ftw/

对于这样的问题，请创建一个CodePen或jsFiddle等，只需要重新创建您遇到问题所需的内容。 http://codepen.io/sheriffderek/pen/e76eb24c23c789accffe6a18fcfdd8c0 - 甚至我的例子都有比需要更多的风格......

还有一个建议 - 如果你不熟悉flex-box，它真的帮助我写出了flex-grow flex-shrink flex-basis等个别属性，而不是简写+总是明确设置flex-direction或任何其他默认值。

html { // sort out box-model
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body { // reset body margin default
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

html {
  background: lightblue;
}

header, main {
  padding: 1rem;
}


header {
  background: white;
}

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    @media (min-width: 500px) {
        flex-direction: row;
    }
  }
  li {
    flex: 1 1 0;
  }
  a {
    display: block;
    padding: 1rem;
    &:hover {
      background: black;
      color: white;
    }
    &.actiive {
      color: red;
    }
  }
}

main {
  background: gray;
}

.main-wrapper {
  max-width: 960px;
  margin: auto;
}

.search-bar {
  //
  input {
    height: 45px;
    width: 100%;
    text-indent: 20px;
    background: black;
    color: white;
    border: 1px solid black;
  }
}

元素溢出视口并导致水平滚动

1 个答案: