对齐导航栏的问题答案

【问题标题】：Problems aligning a nav bar对齐导航栏的问题
【发布时间】：2019-01-20 02:19:38
【问题描述】：

我在我朋友的网站上对齐导航栏时遇到问题。

我试图让他的公司向左浮动，导航项向右浮动。但是，当使用下面的代码时，它们以相反的顺序对齐。

我已使用此SO post 来帮助解决问题，但似乎无济于事。

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;
}

【问题讨论】：

标签： html css

【解决方案1】：

我之前也有这种行为，我觉得跟float:right有关，所以你可以用div包裹那些a标签，如下：

<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 中标签的顺序。希望对您有所帮助。

【讨论】：