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>

But .site-branding and .reg-or-login divs are arranged one above the other.

How to make them occupy one line?

Answer 1

<ul> element by default has some margin at the top and bottom, you have to remove it by adding margin: 0 rule to it.

See example:

.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>

Answer 2

If you want the registration and login to be on the same line you can't make them lists. Create a span or a div for the two elements you want on the same line.

    <span> 
         <a href="">Registration</a><a href="" class="highlight">Login</a>

    </span>

Also in your CSS change float:right to float:left 30%

This is the complete code if you want it.

   <!doctype HTML>
  <html>

      <head>
          <title></title>
          <style type="text/css">
  a#one,
  a#two {
      background-color: yellow;
      border: solid purple 2px;
      border-radius: 25px;
      color: black;
      padding: 16px;
      text-decoration: none;
  }

  .site-header {
      width: 960px;
      margin: 0 auto;
      overflow: hidden;
  }

  .site-header .site-branding {
      float: left;
      width: 360px;
  }

  .site-header .reg-or-login {
      float: left 50%;
      width: 600px;
      overflow: hidden;
  }
          </style>

      </head>

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

              <div class="site-branding">

                  <div id="logo" class="doguni-logo">
                      <img src="download.jpg" alt="">
                  </div>

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

              <div class="reg-or-login">

                  <a id='one' href="">Registration</a> <a id='two' href=""   class="highlight">Login</a>
              </div>

          </header>

      </body>

   </html>

Floating elements that are inside of a div are arranged one above the other

2 个答案: