Question

我正在尝试建立一个简单的网站，我无法弄清楚如何做一些事情。

有一个导航栏，但它位于顶部的图像下方，我该如何将其向下移动？
我想把所有的ul安排在一起，水平而不是垂直。

.jumbotron h1 {
  color: #ffffff;
  font-size: 150px;
  font-family: Sans-serif;
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
}
.nav a {
  color: #ff0000;
  font-size: 50px;
  padding-top: 250px;
}
.jumbotron {
  background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
  position: absolute;
  left: 0px;
  top: 0px;
  height: 350px;
}
.page h3 {
  color: #000000;
  font-size: 30px;
  font-family: Calibri;
  padding-top: 250px;
  padding-left: 50px;
}
.page ul {
  color: #000000;
  font-size: 20px;
  font-family: Calibri;
  padding-left: 75px;
}
.page a {
  color: #000000;
  font-size: 15px;
  font-family: Calibri;
  padding-left: 70px;
}
.nav li {
  display: inline;
  left: 20px;
  position: relative;
}
background:url(./image.png) no-repeat top center;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="nav">
    <div class="container">
      <ul>
        <li><a href="#">History of Gaming</a>
        </li>
        <li><a href="#">Atari</a>
        </li>
        <li><a href="#">Other Games</a>
        </li>
        <li><a href="#">Future</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="jumbotron">
    <div class="container">
      <h1>Gaming: Then, Now & Beyond</h1>
    </div>
  </div>

  <div class="page">
    <div class="container">
      <div>
        <div>
          <div>
            <h3>History of Gaming</h3>
            <ul>
              <li>What is gaming?</li>
              <li>Pong</li>
              <li>Technology Boom</li>
            </ul>
            <p><a href="#">Learn more about the history of gaming</a>
            </p>
          </div>
          <div>
            <h3>Atari</h3>
            <ul>
              <li>40 years of fun</li>
              <li>Who is Nolan Bushnell</li>
              <li>Bought & Sold</li>
            </ul>
            <p><a href="#">Learn more about Atari</a>
            </p>
          </div>
          <div>
            <h3>Other Games</h3>
            <ul>
              <li>PC</li>
              <li>Xbox</li>
              <li>PlayStation</li>
            </ul>
            <p><a href="#">Learn more about other games</a>
            </p>
          </div>
          <div>
            <h3>Future</h3>
            <ul>
              <li>Gaming in society</li>
              <li>Who is driving who?</li>
              <li>CrowdFunding</li>
            </ul>
            <p><a href="#">Learn about future gaming</a>
            </p>
          </div>
        </div>
      </div>
    </div>
</body>

</html>

Answer 1

您可以将jumbotron更改为position: relative/static

或

使导航有点下降：

.nav{
margin-top: 350px;
}

关于ul s：

＆＃13;

ul {
  text-align: center;
  background: grey;  
}
ul li {
  display: inline; 
}

＆＃13;

<ul>

  <li>link</li>
  <li>link</li>
  <li>link</li>
  <ul>

＆＃13;

Answer 2

这就是我要做的事情：

首先移动HTML中jumbotron上方的所有nav。如果需要，将它们都设置为display: block;。

对于ul，添加

.page ul li {
  display: inline-block;
}

或

ul li {
  display: inline-block;
}

页面上的所有内容

如何使用css

2 个答案: