[英]Problems aligning a nav bar
我在将伴侣的网站上的导航栏对齐时遇到问题。
我正在尝试将他的公司浮动到左侧,而导航项则浮动在右侧。 但是,使用下面的代码时,它们以相反的顺序对齐。
我已使用此SO帖子来帮助纠正问题,但似乎无济于事。
HTML
<div id = "navbar">
<a id = "logo">Rob Moore LTD</h3>
<a class = "nav" href="#home">Home</a>
<a class = "nav" href="#about">About</a>
<a class = "nav" href="#services">Services</a>
<a class = "nav" href="#gallery">Gallery</a>
<a class = "nav" href="#contact">Contact</a>
</div>
CSS
#navbar {
text-transform: uppercase;
width: 100%;
height: 58px;
overflow: hidden;
position: fixed;
padding-bottom: 15px;
background-color: #fff;
}
#navbar a {
display: block;
padding-top: 25px;
padding-bottom: 30px;
padding-left: 10px;
float: right;
margin-right: 20px;
color: #000;
text-decoration: none;
}
#navbar .nav {
padding-left: 25px;
}
#navbar #logo {
font-family: 'Arial';
font-size: 30px;
letter-spacing: 3px;
padding-left: 20px;
padding-right: 40px;
margin-right: 10px;
margin-top: -10px;
float: left;
}
我以前有这种行为,我认为这与float:right有关,因此您可以使用div将这些标签包装起来,如下所示:
<div id = "navbar">
<div class="wrapper">
<a id = "logo">Rob Moore LTD</h3>
<a class = "nav" href="#home">Home</a>
<a class = "nav" href="#about">About</a>
<a class = "nav" href="#services">Services</a>
<a class = "nav" href="#gallery">Gallery</a>
<a class = "nav" href="#contact">Contact</a>
</div>
</div>
并在您的CSS中:
.wrapper{
float:right
}
#navbar a {
display: block;
padding-top: 25px;
padding-bottom: 30px;
padding-left: 10px;
margin-right: 20px;
color: #000;
text-decoration: none;
}
或者,您可以只更改html中标签的顺序。 希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.