调整大小时如何防止导航栏中的元素被截断？答案

【问题标题】：How do I prevent elements in my nav-bar being cut off when re-sizing?调整大小时如何防止导航栏中的元素被截断？
【发布时间】：2016-03-20 16:52:20
【问题描述】：

我设法解决了一个问题，当我通过添加调整窗口大小时，我的导航元素会聚在一起：

nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

但是现在，当我调整窗口大小时，导航栏中的元素正在消失。

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Patua+One);
 body {
  margin: 0px;
}
header {
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 15px 0px 15px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
header h1 {
  font-size: 30px;
  display: inline;
  padding: 30px;
  font-family: 'Pacifico', cursive;
}
nav ul {
  margin: 0;
  display: inline;
  padding: 50px;
  white-space: nowrap;
}
#main {
  font-size: 80px;
}
nav ul li {
  color: white;
  list-style-type: none;
  display: inline-block;
  padding: 20px 65px;
  margin: 0px;
  font-family: 'Patua One', cursive;
  display: table-cell;
}
nav ul li:hover {
  color: #999;
}
#ghostButton {
  background: rgba(0, 0, 0, 0.3);
  border: 0.5px solid white;
  width: 200px;
  padding: 10px;
  display: inline-block;
  font-family: "Times new roman";
}
#ghostButton:hover {
  background: rgba(255, 255, 255, 0.3);
}
#hero {
  background-size: cover;
  position: relative;
  height: 100vh;
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg);
}
.header {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 36px;
  -ms-transform: translate(0, -50%);
  /* IE 9 */
  -webkit-transform: translate(0, -50%);
  /* Safari */
  transform: translate(0, -50%);
  font-family: 'Pacifico', cursive;
  font-family: "Times new roman";
}
.header1 {
  padding-bottom: 300px;
  color: black;
  text-align: center;
  font-size: 25px;
  font-family: 'Pacifico', cursive;
  font-family: "Times new roman";
}
p {
  font-size: 20px;
}
/*# sourceMappingURL=stylesheet.css.map */

<! DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

<body>
  <header>
    <nav>
      <h1>Elianos Brasserie</h1>
      <ul>
        <li>Home</li>
        <li>Menu</li>
        <li>Page1</li>
        <li>Page2</li>
      </ul>
    </nav>
  </header>
  <div>

  </div>
  <div id="wrapper">
    <div id="hero">
      <div class="header">
        <h1 id="main">Made with love</h1>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
        <div id="ghostButton">Learn More</div>
      </div>
    </div>
  </div>
</body>

</html>

我希望元素保持间隔。

【问题讨论】：

标签： javascript jquery html css resize

【解决方案1】：

我认为使用flexbox display properties 可以轻松实现这样的效果。

我用一个例子编辑了你的代码。在li 上使用flex-grow:1;，它们将彼此划分可用的水平空间。为了避免换行，您可以考虑将flex-wrap:nowrap; 添加到ul。

在使用 flexbox 之前，请考虑the browser support of flexbox。

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Patua+One);
 body {
  margin: 0px;
}
header {
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 15px 0px 15px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
header h1 {
  font-size: 30px;
  float:left;
  padding: 30px;
  font-family: 'Pacifico', cursive;
}
nav ul {
  margin: 0;
  display: inline;
  padding: 50px;
  display:flex;
}
#main {
  font-size: 80px;
}
nav ul li {
  color: white;
  list-style-type: none;
  display: inline-block;
  //padding: 20px 65px;
  margin: 0px;
  font-family: 'Patua One', cursive;
  flex-grow:1;
}
nav ul li:hover {
  color: #999;
}
#ghostButton {
  background: rgba(0, 0, 0, 0.3);
  border: 0.5px solid white;
  width: 200px;
  padding: 10px;
  display: inline-block;
  font-family: "Times new roman";
}
#ghostButton:hover {
  background: rgba(255, 255, 255, 0.3);
}
#hero {
  background-size: cover;
  position: relative;
  height: 100vh;
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg);
}
.header {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 36px;
  -ms-transform: translate(0, -50%);
  /* IE 9 */
  -webkit-transform: translate(0, -50%);
  /* Safari */
  transform: translate(0, -50%);
  font-family: 'Pacifico', cursive;
  font-family: "Times new roman";
}
.header1 {
  padding-bottom: 300px;
  color: black;
  text-align: center;
  font-size: 25px;
  font-family: 'Pacifico', cursive;
  font-family: "Times new roman";
}
p {
  font-size: 20px;
}
/*# sourceMappingURL=stylesheet.css.map */

<! DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

<body>
  <header>
    <nav>
      <h1>Elianos Brasserie</h1>
      <ul>
        <li>Home</li>
        <li>Menu</li>
        <li>Page1</li>
        <li>Page2</li>
      </ul>
    </nav>
  </header>
  <div>

  </div>
  <div id="wrapper">
    <div id="hero">
      <div class="header">
        <h1 id="main">Made with love</h1>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
        <div id="ghostButton">Learn More</div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

完美，但是，有没有办法让元素与标题“Elianos”在同一行？
我刚刚添加了一个 float:left;到 h1 来实现这一点，但您也可以考虑将 h1 放在 ul 列表中的 li 标记中。

【解决方案2】：

我认为您应该阅读并学习一些有关响应式网页设计的知识。或者只是将 float: left; 添加到您的 nav ul li 中。

阅读更多关于响应式网页设计here

【讨论】：