导航栏重新定位的麻烦

问题描述 投票：0回答：3

我正在创建我的网站，并注意到我的带有下拉列表的导航栏定位比我想要的要低很多。我立即尝试使用一些不同的方法，如边距和填充，position：fixed和position：absolute和设置距离顶部的距离，但这几乎删除了我的下拉列表。我很想知道为什么会发生这种情况以及我可以做些什么来修复我的代码。

h1 {
	font-size: 54px;
	font-family: 'Kalam', cursive;
	margin: 10px;
	color: white;
}
body {
	background: url("flowers.jpg") no-repeat fixed;
}


.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: 'Poiret One', cursive;
	background-color: rgba(249, 197, 249, 0.5);
	width: 100%;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(249, 197, 249);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: rgb(249, 197, 249);
}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Japan.css">
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> 
<title>
Japan
</title>
</head>
<body>
<h1>Japan: Land of the Rising Sun</h1>
<div style="margin-top: 110px"class="navbar">
  <a href="">Intro</a>
  <a href="">WEIRD Facts</a>
<div class="dropdown">
<button class="dropbtn">Nature
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Fauna.htm">Fauna</a>
<a href="Flora.htm">Flora</a>
<a href="Geography.htm">Geography</a>
</div>
</div>
  <div class="dropdown">
    <button class="dropbtn">Culture
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="Cuisine.html">Cuisine</a>
      <a href="Clothing.html">Clothing</a>
      <a href="Traditions.html">Traditions</a>
	  <a href="Sports.html">Sports</a>
	  <a href="Holidays.html">Holidays</a>
    </div>
  </div> 
</div>
</body>
</html>
html css navigation position navbar
3个回答
0
投票

尝试添加一个normalize.css或reset.css，它为每个项目提供了一个开始点，每个浏览器都有相同的样式：

https://necolas.github.io/normalize.css/

0
投票

你有间距，因为不需要的边缘和h1上方的navbar标签

所以你需要从类navbar中删除边距并将h1移到navbar下方

见下面的演示

h1 {
	font-size: 54px;
	font-family: 'Kalam', cursive;
	margin: 10px;
	color: #333;
}
body {
	background: url("flowers.jpg") no-repeat fixed;
margin: 0;
}


.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: 'Poiret One', cursive;
	background-color: rgba(249, 197, 249, 0.5);
	width: 100%;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(249, 197, 249);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: rgb(249, 197, 249);
}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Japan.css">
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> 
<title>
Japan
</title>
</head>
<body>

<h1>Japan: Land of the Rising Sun</h1>

<div class="navbar">
  <a href="">Intro</a>
  <a href="">WEIRD Facts</a>
<div class="dropdown">
<button class="dropbtn">Nature
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Fauna.htm">Fauna</a>
<a href="Flora.htm">Flora</a>
<a href="Geography.htm">Geography</a>
</div>
</div>
  <div class="dropdown">
    <button class="dropbtn">Culture
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="Cuisine.html">Cuisine</a>
      <a href="Clothing.html">Clothing</a>
      <a href="Traditions.html">Traditions</a>
	  <a href="Sports.html">Sports</a>
	  <a href="Holidays.html">Holidays</a>
    </div>
  </div> 
</div>



</body>
</html>
0
投票

你可能想看看bootstrap。 使用bootstrap，您可以轻松创建一个漂亮和干净的网页。

bootstrap docs

我认为下面的HTML代码就是你想要做的。 （减去你的造型偏离课程）

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>
  <title>
    Japan
  </title>
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Intro<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">WEIRD Facts<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nature</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="Fauna.htm">Fauna</a>
            <a class="dropdown-item" href="Flora.htm">Flora</a>
            <a class="dropdown-item" href="Geography.htm">Geography</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Culture</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="Cuisine.html">Cuisine</a>
            <a class="dropdown-item" href="Clothing.html">Clothing</a>
            <a class="dropdown-item" href="Traditions.html">Traditions</a>
            <a class="dropdown-item" href="Sports.html">Sports</a>
            <a class="dropdown-item" href="Holidays.html">Holidays</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

  <main role="main">
    <div class="jumbotron">
      <div class="container">
        <h1 class="d-flex align-items-stretch align-self-stretch">Japan: Land of the Rising Sun</h1>
        <p>


          Mauris egestas pretium mollis. Sed auctor, massa id feugiat bibendum, magna ante cursus erat, sit amet tristique neque lorem ac lacus. Sed sit amet eros et erat sagittis aliquam eget non tortor. In facilisis, ligula dictum feugiat volutpat, massa neque
          suscipit magna, eu blandit nulla leo sed nibh. In fermentum sem lacus, sit amet vulputate ex auctor sit amet. Nulla varius libero sit amet est luctus eleifend. Duis eu nibh et mi porta tempus et a libero. Maecenas dolor risus, ultricies sit
          amet eleifend a, venenatis et ipsum. Aenean purus tellus, pulvinar auctor lectus eu, sodales luctus elit. Suspendisse pharetra mattis justo, id bibendum sem aliquet a. Integer suscipit eu elit tincidunt tempor. Sed placerat rhoncus nisl, eget
          semper lectus feugiat eu. Vivamus eget felis sed est elementum ullamcorper quis sit amet orci. Praesent vel diam vel velit tempor varius. Nunc et mi eget purus egestas congue quis a tellus. Sed interdum sapien lectus, sed tincidunt dolor blandit
          a. Fusce lobortis tempus libero sed vestibulum. Donec fringilla lectus nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur a ex ut felis dictum commodo. Integer consectetur elit vitae mattis
          volutpat. Cras tincidunt ex id justo sodales commodo. Maecenas id accumsan orci. Morbi id nibh sit amet nibh rutrum elementum sed ac sem. Integer efficitur ac diam ac tempus. Sed in venenatis metus. Aliquam consectetur purus id enim dictum,
          sed tempor est iaculis. Suspendisse maximus libero id erat dictum blandit. Duis tincidunt maximus tortor, aliquet posuere quam faucibus vitae.
        </p>

      </div>
    </div>
  </main>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.