html - div 内的 float 元素排列在另一个上方

Question

.site-header {
  width: 960px;
  margin: 0 auto;
  overflow: hidden; }
  .site-header .site-branding {
    float: left;
    width: 360px; }
  .site-header .reg-or-login {
    float: right;
    width: 600px;
    overflow: hidden; }

<header id="masthead" class="site-header" role="banner">

    <div class="site-branding">

        <div id="logo" class="doguni-logo">
            <img src="/wp-content/themes/doguni/layouts/images/doguni-logo.jpg" alt="">
        </div>

    </div><!-- .site-branding -->

    <div class="reg-or-login">
        <ul>
            <li><a href="">Registration</a></li>
            <li><a href="" class="highlight">Login</a></li>
        </ul>
    </div>

</header>

但是 .site-branding 和 .reg-or-login div 是一层层排列的。

如何让他们占一行？

Answer 1

<ul>默认情况下元素在顶部和底部有一些边距，你必须通过添加 margin: 0 来删除它规则。

看例子:

.site-header {
  width: 960px;
  margin: 0 auto;
  overflow: hidden; }
  .site-header .site-branding {
    float: left;
    width: 360px; }
  .site-header .reg-or-login {
    float: right;
    width: 600px;
    overflow: hidden; }

ul {
  margin: 0;
}

<header id="masthead" class="site-header" role="banner">

    <div class="site-branding">

        <div id="logo" class="doguni-logo">
            <img src="http://lorempixel.com/360/100/" alt="">
        </div>

    </div><!-- .site-branding -->

    <div class="reg-or-login">
        <ul>
            <li><a href="">Registration</a></li>
            <li><a href="" class="highlight">Login</a></li>
        </ul>
    </div>

</header>