hin- und herbewegende Elemente, die im Inneren eines div sind, angeordnet eine über der anderen

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

Aber .site-branding und .reg-or-login divs sind übereinander angeordnet.

Wie man sie in einer Zeile belegen kann?

Quelle

2016-04-04 9Algorithm

<ul> Element hat standardmäßig einen Rand oben und unten, Sie müssen es entfernen, indem Sie die Regel margin: 0 hinzufügen.

Siehe Beispiel:

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

Quelle

2016-04-04 18:23:11

-1

Wenn Sie die Registrierung möchten und Anmeldung auf der gleichen Linie sein, das Sie nicht, sie Listen machen. Erstellen Sie für die beiden gewünschten Elemente in derselben Zeile einen Bereich oder ein Div.

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

    </span>

auch in Ihrem CSS ändern float: right zu schweben: 30% links

Dies ist der vollständige Code, wenn Sie es wollen.

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

Quelle

2016-04-04 18:41:12

hin- und herbewegende Elemente, die im Inneren eines div sind, angeordnet eine über der anderen

Antwort

Verwandte Themen