Question

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

我试图让他的公司浮动在左侧，而导航项则浮动在右侧。但是，当使用下面的代码时，它们的排列顺序相反。

我已使用此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;
}

Answer 1

我以前有这种行为，我认为这与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中标记的顺序。希望对您有所帮助。

调整导航栏时出现问题

1 个答案: