元素开始用float浮动：左边

Question

我不明白为什么搜索框会变成一个大盒子而不是一个薄矩形。导航栏也非常奇怪地跳了起来。我希望所有东西都水平对齐。

如果我删除搜索框，一切正常;导航栏跳到应该的位置。

HTML

<header>
    <section id="headerContainer">
        <a href="/"><section id="logo">HALP A DOG</section></a>
      <section id="searchBox">Searchbox</div>
        <nav>
         <ul>
         <a href="/"><li><div class="articles_icon"></div>DOGS</li></a>
         <a href="products.php"><li><div class="farms_icon"></div>LEACH</li></a>
         <a href="motivation.php"><li><div class="buy_icon"></div>WATER</li></a>
         <a href="#"><li id="sell"><div class="sell_icon"></div>ABOUT</li></a>
         </ul>
        </nav>
    </section>
  </header>

CSS

 header{
    height: 90px;
    width: 100%;
    background: #F66000;
    box-shadow: 0px 2px 5px black;
}

section#headerContainer{
    border: 1px solid black;
}

section#logo{
    padding-top: 23px;
    padding-left: 1.5%;
    font-size: 50px;
    width: 450px;
    height: 68px;
    float: left;
    font-family: via;
}

section#searchBox {
  margin-top: 30px;
  margin-left: 6%;
  float: left;
  width: 12%;
  height: 1.5%;
  border: 3px solid black;
}

nav{
    width: 500px;
    height: 100px;
    float: left;
  margin-left: 20%;

 nav ul li{
border-left: 2px solid black;
width: 120px;
height: 90px;
position: relative;
float: left;
text-align: center;
background: #171717;
color: #F66000;
font-weight: bold;

}     }

Answer 1

您的HTML无效：

<a href="/"><li><div class="articles_icon"></div>DOGS</li></a>

应该是：

<li><a href="/"><div class="articles_icon"></div>DOGS</a></li>

最重要的是，您应该在A-tag上使用display:block并将CSS背景应用于A-tag。 DIV是多余的，没有理由使用它。你应该在LI上使用float:left，而不是NAV本身。

nav a {
    display:block;
    background-image:url(...);
    background-repeat:no-repeat;
}