HTML / CSS 绝对位置和内联块导航栏

Question

我看过一些关于类似问题的答案，但我似乎无法将其合并到我自己的代码中。我知道绝对位置和内联块不能相互配合，因为元素是通过绝对位置从流中取出的。

我一直在尝试让我的导航栏中的下拉菜单看起来像一个普通的下拉菜单。在四处寻找这个问题的解决方案时，相对定位会在实际的下拉菜单旁边调出整个导航栏（请运行查看代码，糟糕的解释）。如果有人能告诉我这里需要做什么，我将不胜感激，因为我花了大约一个小时试图弄清楚该做什么。

如果您也有额外的时间，我也在尝试弄清楚如何使导航栏中的元素居中。然而，这不是优先事项。

非常感谢，

约翰（我有大约 1 周的 HTML/CSS 经验）

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

</head>


<style>

.font {
 font-family: "open sans";
}

 /* Initial Nav Bar */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    left: 0;
    margin-top: 0;
    top: 0;
    position: absolute;
}
 /* Where buttons float */
li {
    float: left;
}

 /* Hover color */
  .active {
   background-image: -webkit-linear-gradient(top, black  0%, #193c5a 100%);
   background-image: -o-linear-gradient(top, black  0%, #193c5a 100%);
   background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
  }
 
   li a:hover, .dropdown:hover .dropbtn {
   background-image: -webkit-linear-gradient(top, black  0%, #193c5a 100%);
   background-image: -o-linear-gradient(top, black  0%, #193c5a 100%);
   background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
  }
 
   .dropdown-content a:hover {
   background-image: -webkit-linear-gradient(top, black  0%, #193c5a 100%);
   background-image: -o-linear-gradient(top, black  0%, #193c5a 100%);
   background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
  }
  
li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

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

.dropdown:hover .dropdown-content {
    display: block;
}

.navbar-default {
 background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
 background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
 background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

.wrapper-border-radius {
 text-align: center;
 width: 100%;
 margin: 0;
 padding: 0;
}

</style>


<div class="wrapper-border-radius">
 <ul class="navbar-default">
  <li><a class="font active" href="#">Home</a></li> 
  
  <li class="dropdown navbar-default">  
  
      <a class = "font" href="#" class="dropbtn">Classes</a>
      <div class="dropdown-content navbar-default">
       <a class = "font" href="physics.html">Physics</a> 
       <a class = "font" href="math.html">Math</a>
       <a class = "font" href="humanities.html">Humanities</a>
       <a class = "font" href="stem.html">STEM</a>
       <a class = "font" href="STW.html">STW</a>
       <a class = "font" href="spanish.html">Spanish</a>
       <a class = "font" href="computerscience.html">Computer Science</a>
      </div>     
       <li><a class = "font" class="tend" href="contactme.html">About Me</a></li>
       <li><a class = "font" href="stemproject.html">STEM Project</a></li>
       <li><a class = "font" class="tend"href="soccer.html">Sports</a></li>
    <li><a class = "font" class="tend" href="contactme.html">Contact Me</a></li>
  
 </ul>
</div>

</html>

Answer 1

给你希望这有帮助

body{margin:0;}
.font {
  font-family: "open sans";
}

/* Initial Nav Bar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: auto;
  left: 50%;
  margin-top: 0;
  top: 0;
  position: absolute;
  transform: translateX(-50%);
}
.navbar {
  white-space: nowrap;
}
.navbar li {
  display: inline-block;
}

/* Hover color */
.active {
  background-image: -webkit-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: -o-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

li a:hover, .dropdown:hover .dropbtn {
  background-image: -webkit-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: -o-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

.dropdown-content a:hover {
  background-image: -webkit-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: -o-linear-gradient(top, black  0%, #193c5a 100%);
  background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

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

.dropdown:hover .dropdown-content {
  display: block;
}

.navbar-default, .navbar-default-content {
    background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
  background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
  background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

.wrapper-border-radius {
  text-align: center;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
   background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
  background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
  background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

</head>

<div class="wrapper-border-radius">
 <ul class="navbar-default navbar">
  <li><a class="font active" href="#">Home</a></li> 
  
  <li class="dropdown navbar-default">  
      <a class = "font" href="#" class="dropbtn">Classes</a>
      <div class="dropdown-content navbar-default-content">
       <a class = "font" href="physics.html">Physics</a> 
       <a class = "font" href="math.html">Math</a>
       <a class = "font" href="humanities.html">Humanities</a>
       <a class = "font" href="stem.html">STEM</a>
       <a class = "font" href="STW.html">STW</a>
       <a class = "font" href="spanish.html">Spanish</a>
       <a class = "font" href="computerscience.html">Computer Science</a>
      </div>     
       <li><a class = "font" class="tend" href="contactme.html">About Me</a></li>
       <li><a class = "font" href="stemproject.html">STEM Project</a></li>
       <li><a class = "font" class="tend"href="soccer.html">Sports</a></li>
    
  
 </ul>
</div>

</html>

HTML / CSS 绝对位置和内联块导航栏

HTML / CSS Absolute position & inline block navigation bar

html

css

css-position

centering

navigationbar