HTML / CSS绝对位置＆amp;内联块导航栏

时间：2016-09-05 22:40:09

标签： html css css-position centering navigationbar

我已经看过一些关于类似问题的答案，但我似乎无法将其纳入我自己的代码中。我知道绝对位置和内联块不能彼此协同工作，因为元素从绝对位置流出。

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

如果你还有一个额外的时刻，我也试图弄清楚如何在这个导航栏中居中元素。然而，这不是优先事项。

非常感谢你，

John（我有大约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>

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题