由 UL 元素创建的巨大边距阻挡了其他 div

Question

我创建了一个设置为内联显示的基本 UL 元素（网站顶部的基本导航栏）。我为搜索栏创建了另一个 div，它设置为浮动在 UL 元素的右侧，但由于某种原因浮动在导航 div 下方。在检查我的元素时，我注意到 UL 元素有一个边距，占据了它左右两侧所有剩余的 space，尽管我没有专门为它分配边距。我错过了什么吗？如果能回答这个问题，我将不胜感激，请注意，我对网络编程还很陌生，所以如果我遗漏了一些明显的东西，请原谅！

#nav_bar{
  height: 3.5rem;
  border-top: 2px solid $theme_grey;
  border-bottom: 2px solid $theme_grey;
  background-color: $theme_dark_grey;
}

#nav_bar ul{
  color: #FFF;
  list-style-type: none;
  padding: 0.8rem 0;
  overflow: hidden;
  margin: 0px 0px;
  width: 50%;
}

#nav_bar li{
  font-size: 1.5rem;
  display: inline;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  height: 4rem;
  letter-spacing: 0.2rem;
}

#nav_bar img{
  vertical-align:middle;
}

#nav_bar a{
  text-decoration: none;
  color: white;
}

#nav_bar a:hover{
  text-decoration: underline;
  color: $link-color;
}

#nav_bar a span{
  margin-left: 1rem;
}

#nav_bar #search_engine
{
  width: 25%;
  margin: 0;
  float: right;
  height: auto;
}

#nav_bar #search_bar
{
  border: 0.2rem solid $theme_grey;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  padding: 0.4rem 0.5rem;
  outline: none;
}

#nav_bar #search_bar:hover{
  border: 0.2rem solid #6666FF;
}

#nav_bar #search_btn
{
  cursor: pointer;
}

<div id="nav_bar">
      <ul>
        <a href="#"><li><img src="images/icons8-Home-32.png" class="home_icon"></img><span>Home</span></li></a>
        <a href="#"><li><img src="images/icons8-Chevron Up-32.png" class="chevron_icon"><span>Popular</span></li></a>
        <a href="#"><li><img src="images/Path.png"><span>Trending</span></li></a>
        <li><img src="images/icons8-Detective-32.png"></li>
        <li></li>
      </ul>
      <!-- "search.php" page to display search results -->
      <div id="search_engine">
      <form action="search.php" method="post">
        <input type="text" id="search_bar" placeholder="Search..." value="" maxlength="25" autocomplete="off" onmousedown="" onblur="" />
        <input type="submit" id="search_btn" value="Go!" />
      </form>
      </div>
    </div>

Answer 1

向左或向右浮动元素会导致跟随的元素包裹浮动元素。您的搜索栏不会位于导航旁边，因为搜索栏位于导航之后，而不是之前。尝试将 float:left 设置为 #nav_bar ul，如图所示。我冒昧地将 a 的颜色从白色更改。

#nav_bar{
  height: 3.5rem;
  border-top: 2px solid $theme_grey;
  border-bottom: 2px solid $theme_grey;
  background-color: $theme_dark_grey;
}

#nav_bar ul{
  color: #FFF;
  list-style-type: none;
  padding: 0.8rem 0;
  overflow: hidden;
  margin: 0px 0px;
  width: 50%;
  float:left;
}

#nav_bar li{
  font-size: 1.5rem;
  display: inline;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  height: 4rem;
  letter-spacing: 0.2rem;
}

#nav_bar img{
  vertical-align:middle;
}

#nav_bar a{
  text-decoration: none;
}

#nav_bar a:hover{
  text-decoration: underline;
  color: $link-color;
}

#nav_bar a span{
  margin-left: 1rem;
}

#nav_bar #search_engine
{
  width: 25%;
  margin: 0;
  float: right;
  height: auto;
}

#nav_bar #search_bar
{
  border: 0.2rem solid $theme_grey;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  padding: 0.4rem 0.5rem;
  outline: none;
}

#nav_bar #search_bar:hover{
  border: 0.2rem solid #6666FF;
}

#nav_bar #search_btn
{
  cursor: pointer;
}

<div id="nav_bar">
      <ul>
        <a href="#"><li><img src="images/icons8-Home-32.png" class="home_icon"></img><span>Home</span></li></a>
        <a href="#"><li><img src="images/icons8-Chevron Up-32.png" class="chevron_icon"><span>Popular</span></li></a>
        <a href="#"><li><img src="images/Path.png"><span>Trending</span></li></a>
        <li><img src="images/icons8-Detective-32.png"></li>
        <li></li>
      </ul>
      <!-- "search.php" page to display search results -->
      <div id="search_engine">
      <form action="search.php" method="post">
        <input type="text" id="search_bar" placeholder="Search..." value="" maxlength="25" autocomplete="off" onmousedown="" onblur="" />
        <input type="submit" id="search_btn" value="Go!" />
      </form>
      </div>
    </div>

为此，您不需要在搜索元素上 float:right。

Answer 2

另一种选择是使用 flexboxes 来避免浮动。

#nav_bar {
  display: flex;
}

ul {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
}

a:not(:last-child) {
  margin-right: 1em;
}

#search_engine {
  margin-left: auto;
}

<div id="nav_bar">
  <ul>
    <a href="#">
      <li><img src="http://placehold.it/25" class="home_icon"><span>Home</span></li>
    </a>
    <a href="#">
      <li><img src="http://placehold.it/25" class="chevron_icon"><span>Popular</span></li>
    </a>
    <a href="#">
      <li><img src="http://placehold.it/25"><span>Trending</span></li>
    </a>
  </ul>
  <!-- "search.php" page to display search results -->
  <div id="search_engine">
    <form action="search.php" method="post">
      <input type="text" id="search_bar" placeholder="Search..." value="" maxlength="25" autocomplete="off" onmousedown="" onblur="" />
      <input type="submit" id="search_btn" value="Go!" />
    </form>
  </div>
</div>

由 UL 元素创建的巨大边距阻挡了其他 div

Huge margin created from UL element blocks out other divs

html

css

margin

spacing

html-lists