php - 怎么了？(Wordpress(HTML/CSS))

Question

我不知道是什么，但我的帖子与导航栏发生冲突，如下所示: http://i.imgur.com/y2qhEzH.png

谢谢，如果你能帮忙:)

导航栏 HTML/php

<div>
         <nav class="site-nav">

            <?php

            $args = array(
                'theme_location' => 'primary'
            )

            ?>

            <?php wp_nav_menu( $args); ?>

        </nav> </div>

发布 HTML/php

    <div>
  <?php
    if(have_posts()): 
        while (have_posts()) : the_post(); ?>
            <h2><a a href="<?php the_permalink(); ?>">
                <?php the_title(); ?></a></h2>
            <?php the_content(); ?>

    <?php endwhile;

    else :
        echo '<p>No content found</p>';

            endif;
?> </div>

CSS

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

.site-nav ul li a:link,
.site-nav ul li a:visited {
    display: block;
    padding: 10px 18px;
    border-top: white 3px solid;
    text-decoration: none;

}

我刚开始学习 wordpress，我几乎无法通过这个。帮助:)

Answer 1

尝试将此添加到您的 CSS:

.site-nav {
  float: left;
}

这是 a Fiddle您的设置可能看起来像减去 PHP 和 here's one与修复。

完整代码

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

.site-nav ul li a:link,
.site-nav ul li a:visited {
    display: block;
    padding: 10px 18px;
    border-top: white 3px solid;
    text-decoration: none;

}

/* Added this to simulate your window size */
.container {
  width: 360px;
}

/* Fix */
.site-nav {
  float: left
}

<div class="container">
  <div>
    <nav class="site-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Logos</a></li>
        <li><a href="#">Websites</a></li>
      </ul>
    </nav>
  </div>
  <div>
    <h2><a href="">Welcome</a></h2>
    <p>Hey!</p>
    <p>Welcome to our site.</p>
  </div>
</div>