Question

尝试将文本居中在跨越浏览器窗口大小的div中，并带有背景图像。也想要“滚动”按钮＆＃39;文本保持在div的底部附近。出于某种原因，当使用浮动时，导航中使用的ul消失。一直在寻找一段时间，似乎找不到任何可以解决的问题。

＆＃13;

nav {
  background-color: red;
  padding: 0;
  margin: 0;
}
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
  float: left;
  width: 50%;
}
#title {
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
#firstThing {
  margin: 0;
  padding: 0;
  height: 100vh;
  position: relative;
  background-image: url('bike.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#scroll {
  color: green;
  margin: 0;
  padding: 0;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

＆＃13;

<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="whatev.css">
</head>

<body>
  <nav>
    <ul>
      <li>a</li>
      <li>b</li>
    </ul>
  </nav>
  <div id='firstThing'>
    <div id='title'>
      <h2>Some Text</h2>
    </div>
    <p id='scroll'>Scroll Button</p>
  </div>
  Other Stuff
  <br>
</body>

</html>

＆＃13;

用div填充bowser窗口后，导航栏消失

0 个答案: