重新调整大小时，如何防止导航栏中的元素被切断？

时间：2016-03-20 16:52:21

标签： javascript jquery html css resize

我设法修复了一个问题，我的导航元素在窗口调整大小时聚集起来，添加：

nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

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

＆＃13;
＆＃13; 
@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 */
＆＃13; 
<! 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>
＆＃13;
＆＃13;
＆＃13;

我希望元素保持间隔。

2 个答案:

答案 0 :(得分：0)

我认为您可以使用flexbox display properties轻松实现此类效果。

我用一个例子编辑了你的代码。在flex-grow:1;上使用li，他们将在彼此之间划分可用的水平空间。为避免换行，您可以考虑将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>

答案 1 :(得分：0)

我认为您应该阅读并了解有关响应式网页设计的内容。或者只需将float: left;添加到nav ul li即可。

详细了解自适应网页设计here

相关问题
最新问题