Probleme beim Ausrichten meines Header-Inhalts

Ich erstelle einen Artikel, den ich auf The Economist gefunden habe und ich habe Probleme beim Erstellen der Kopfzeile. Bitte beachte, dass ich dies tue, ohne ihren Code wörtlich zu wiederholen. Ich versuche, meine eigene Implementierung zu erstellen.Probleme beim Ausrichten meines Header-Inhalts

header { 
 
    background-color: #364043; 
 
} 
 

 
.header__content { 
 
    width: 70%; 
 
    margin: auto; 
 
} 
 

 
.header__left-content { 
 
    display: inline; 
 
    width: 50%; 
 
} 
 

 
.header__nav ul { 
 
    display: inline; 
 
} 
 

 
.header__nav li { 
 
    line-height: 0px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.header__logo { 
 
    padding-right: 25px; 
 
} 
 

 
.header__nav-link { 
 
    padding-right: 15px; 
 
}

<html> 
 

 
<body> 
 
    <header> 
 
    <div class="header__content"> 
 
     <div class="header__left-content"> 
 
     <div class="header__nav"> 
 
      <ul> 
 
      <li class="header__logo"> 
 
       <img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/"> 
 
      </li> 
 
      <li class="header__nav-link"> 
 
       <a href="google.com">Topics</a></li> 
 
      <li class="header__nav-link"> 
 
       <a href="google.com">Print Edition</a> 
 
      </li> 
 
      <li class="header__nav-link"> 
 
       <a href="google.com">More</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <!--   <div class="header__separator"></div> --> 
 
     <div class="header__site-functions"> 
 
     <p>right</p> 
 
     </div> 
 
    </div> 
 
    </header> 
 
    <div class="container"></div> 
 
</body> 
 

 
</html>

Ich habe Probleme mit dem Absatzelement bekommen, und schließlich seinen Behälter auf der rechten Seite zu sitzen, wie in dem Artikel dargestellt.

Gedanken zu diesem Thema? Ich bin neu in der Branche, so einfach mit mir, wenn das eine einfache Lösung ist.

Quelle

2017-03-14 Zach Harriott

Sie können display: flex; justify-content: space-between; für das Element verwenden, das die linken/rechten Abschnitte des Headers umschließt, um diese in einer durch den verfügbaren Platz getrennten Zeile einzufügen. Und Sie können align-items verwenden, um diesen Inhalt vertikal auszurichten.

header { 
 
    background-color: #364043; 
 
} 
 

 
.header__content { 
 
    width: 70%; 
 
    margin: auto; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.header__left-content { 
 
    display: inline; 
 
    width: 50%; 
 
} 
 

 
.header__nav ul { 
 
    display: inline; 
 
} 
 

 
.header__nav li { 
 
    line-height: 0px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.header__logo { 
 
    padding-right: 25px; 
 
} 
 

 
.header__nav-link { 
 
    padding-right: 15px; 
 
}

<header> 
 
    <div class="header__content"> 
 
    <div class="header__left-content"> 
 
     <div class="header__nav"> 
 
     <ul> 
 
      <li class="header__logo"> 
 
      <img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/"> 
 
      </li> 
 
      <li class="header__nav-link"> 
 
      <a href="google.com">Topics</a></li> 
 
      <li class="header__nav-link"> 
 
      <a href="google.com">Print Edition</a> 
 
      </li> 
 
      <li class="header__nav-link"> 
 
      <a href="google.com">More</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <!--   <div class="header__separator"></div> --> 
 
    <div class="header__site-functions"> 
 
     <p>right</p> 
 
    </div> 
 
    </div> 
 
</header> 
 
<div class="container"></div>

Quelle

2017-03-14 23:34:53

perfekt gearbeitet. Sehr geschätzt! Ich werde selbst einige Nachforschungen darüber anstellen, warum das funktioniert hat, aber ich würde gerne den Gedanken dahinter in Ihren Worten hören, wenn Sie eine Sekunde haben. –

@ZachHarriott kein Problem. Der Klappentext an der Spitze meiner Antwort ist mein Denken :) Welche Klärung benötigen Sie? –

Nichts wirklich, sorry. Ich las es erneut und bekam nach einer Minute ein völlig anderes Verständnis. Stört mich nicht, lol. –

Dies geschieht aufgrund Ihrer class="header__site-functions" einem Block-Element ist und die 100% der Breite nehmen, so dass er in einer Linie nicht passt. Sie können ein Floating-Element verwenden, es zu beheben:

header { 
 
    background-color: #364043; 
 
} 
 

 
.header__content { 
 
    width: 70%; 
 
    margin: auto; 
 
} 
 

 
.header__left-content { 
 
    display: inline-block; 
 
    width: 50%; 
 
} 
 

 
.header__nav ul { 
 
    display: inline; 
 
} 
 

 
.header__nav li { 
 
    line-height: 0px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.header__logo { 
 
    padding-right: 25px; 
 
} 
 

 
.header__nav-link { 
 
    padding-right: 15px; 
 
} 
 
.header__site-functions{ 
 
    float:right; 
 
}

<html> 
 

 
<body> 
 
    <header> 
 
    <div class="header__content"> 
 
     <div class="header__left-content"> 
 
     <div class="header__nav"> 
 
      <ul> 
 
      <li class="header__logo"> 
 
       <img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/"> 
 
      </li> 
 
      <li class="header__nav-link"> 
 
       <a href="google.com">Topics</a></li> 
 
      <li class="header__nav-link"> 
 
       <a href="google.com">Print Edition</a> 
 
      </li> 
 
      <li class="header__nav-link"> 
 
       <a href="google.com">More</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <!--   <div class="header__separator"></div> --> 
 
     <div class="header__site-functions"> 
 
     <p>right</p> 
 
     </div> 
 
    </div> 
 
    </header> 
 
    <div class="container"></div> 
 
</body> 
 

 
</html>

Quelle

2017-03-14 23:39:03

Probleme beim Ausrichten meines Header-Inhalts

Antwort

Verwandte Themen