css - wordpress 中的导航菜单溢出

Question

我正在开发一个 wordpress 主题，但导航菜单项溢出了内容。

因此，当我调整它的大小时或在菜单中添加新元素时，它们似乎超出了标题范围。

下面我添加了代码和屏幕截图。

  <header class="site-header">
        <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
        <h5><?php bloginfo('description'); ?></h5>

        <nav class="site-nav">
          <?php
          $args = $args = array('theme_location' => 'primary', );
          ?>
          <?php wp_nav_menu($args);?>
        </nav>
    </header>


/* Navigation  */

  .site-nav ul{
  padding: 0;
  margin-bottom: 50px;
}
.site-nav ul:before, site-nav ul:after{content: ""; display: table;}
.site-nav ul:after {clear: both;}
.site-nav ul{*zoom: 1;}

.site-nav ul li{
  list-style: none;
  float: left;
}

/* Site header menu */
.site-header nav ul li{
  margin-right: 5px;
}

.site-header nav ul li a:link,
.site-header nav ul li a:visited{
  display: block;
  padding: 10px 18px;
  border: 1px solid #892ae1;
  text-decoration: none;
}
.site-header nav ul li a:hover{
  background-color: #ECECEC;
}
.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited{
  background-color: #006ec3;
  color: #fff;
}

下面是它的截图。 Click to view screenshot

Answer 1

那是因为 float:left;我认为。 请尝试在您的 CSS 中使用以下代码；

.site-header:after{
  content:"";
  display:block;
  clear:both;
}