浮動元素，它們是div中被佈置在其他

.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上方的一個被佈置在另一個之上。

如何讓它們佔據一條線？

來源

2016-04-04 9Algorithm

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

來源

2016-04-04 18:23:11

-1

如果你想註冊和登錄是你不能讓他們列出了同一行。爲同一行上的兩個元素創建一個跨度或div。

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

    </span>

在你的CSS改變浮動

另外：右浮動：左30％

這是完整的代碼，如果你想要它。

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

來源

2016-04-04 18:41:12

浮動元素，它們是div中被佈置在其他

回答

相關問題