Question

我正在制作一个可爱的网站，虽然我想在页面底部有一个固定的固定导航栏，它似乎是固定的，但在左边，但它似乎在大约一厘米后开始。右边的轻微开始就是杀了我。我当然没有告诉它这样做。我想在底部固定一个恒定的导航栏。我在CSS中缺少什么？

html { 
  background: url(../images/mexicobeach.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  font-family: 'Sansita One', cursive;
  font-size: 82px;
  text-align: center;
  margin: 60px 0 0 0;
}

h2 {
   font-family: 'Sansita One', cursive;
  font-size: 120px;
  text-align: center;
  margin: 60px 0 0 0;
}

.nav {
  position:fixed;
  bottom:0px;
  font-family: 'Sansita One', cursive;
  width:100%;
  height:50px;
  padding: 0px;
  text-align: center;
}

 ul {
      padding: 10px;
      background: rgba(8, 102, 112, 0.5);
    }
    li {
      display: inline;
      padding: 10px 20px 0px 30px;
    }
      a {
      color: white;
    }

<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="css/mexicostylesheet.css" />
  <link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
  <title>Smithies in Mexico</title>
  <style> 
  </style>
</head>

<body>
<div class="nav">
    <div class="container">
      <ul id="navigation">
        <li><a href="subpageabout">About</a></li>
        <li><a href="subpagestay">Stay</a></li>
        <li><a href="subpagedo">Do</a></li>
        <li><a href="subpageeat">Eat</a></li>
        <li><a href="subpagemexicanmadlibs">Mexican Mad Libs</a></li>
        <li><a href="subpagetacogame">Taco Game</a></li>
        <li><a href="subpagecountdown">Countdown</a></li>
        <li><a href="subpagequiz">Quiz</a></li>
    </ul>
  </div>
</div>

  <div class="jumbotron"
    <div class="container">
        <h1>Smith Ladies Go To</h1>
        <h2>Mexico</h2>
        </div>
      </div>
    </div> 


</body>

Answer 1

您需要为固定导航添加left值：

.nav {
  position:fixed;
  bottom:0px;
  left:0; /*ADD THIS*/
  font-family: 'Sansita One', cursive;
  width:100%;
  height:50px;
  padding: 0px;
  text-align: center;
}

JsFiddle上的演示

Navbar走向正确 - 为什么？

1 个答案: