Wenn Sie zur Khan Academy gehen, sehen Sie die Anmeldung/Anmeldung und Themen auf verschiedenen Seiten, auch das khanacademy-Logo in der Mitte.So trennen Sie Texte in HTML mit CSS

Ich habe versucht, meine Website das gleiche, aber immer etwas falsch

body{ 
 
\t font-family: 'Comfortaa', cursive; 
 
    } 
 
    .header{ 
 
\t  border-bottom: 1px solid #eee; 
 
\t  padding: 10px 0px; 
 
\t  width: 100%; 
 
\t  text-align: center; 
 
    } 
 
    .header a{ 
 
\t  color: #333; 
 
\t  text-decoration: none; 
 
\t  margin: 250px; 
 
    } 
 
    .header a:hover{ 
 
\t  color: #EEEEEE; 
 
    }

<div class="header"> 
 
\t \t <a href="/" class="a1">Test</a> 
 
\t \t <a href="logsign.php" class="a2">Login/Signup</a> 
 
\t </div>

Quelle

2017-02-08 Christepher Arakelian

Können Sie einen Screenshot von dem, was Sie erreichen wollen? –

Die Art und Weise Khan Academy macht es mit 3 Container-Elemente ist. Dann rechtfertigen sie den Inhalt innerhalb dieser separaten Elemente. Hier komme ich ohne flexbox aus und benutze nur floats und clearfix.

HTML

<header> 
    <div class="header_left"></div> 
    <div class="header_center"></div> 
    <div class="header_right"></div> 
</header>

CSS

header:after{ 
    content:""; 
    display:block; 
    clear:both; 
} 

header > div{ 
    float:left; 
} 

.header_left{ 
    width:40%; 
    text-align:left; 
} 

.header_center{ 
    width:20%; 
    text-align:center; 
} 

.header_right{ 
    width:40%; 
    text-align:right; 
}

Quelle

2017-02-08 18:53:57

Vielen Dank, ich habe die header_right auf 20% Breite geändert, aber wenn ich die header_left auf 20% Breite editiere, ändert sich nichts, was ich meine ist, ich wollte nicht, dass beide Enden auf der Browserseite stecken bleiben. –

Eigentlich verstehe ich nicht, wonach Sie suchen. Wenn die Kopfzeile eine feste Breite haben soll, empfehle ich eine 'max-width' zum' header' hinzuzufügen. Dann können die Kinder in der Kopfzeile enthalten sein und nicht so aussehen, als ob sie an den Seiten der Seite kleben würden. –

Sie machen diese display: flex; justify-content: space-between; mit leicht tun können

.header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    max-width: 960px; 
 
    width: 90%; 
 
    margin: auto; 
 
}

<div class="header"> 
 
    <a href="/" class="a1">Test</a> 
 
    <a href="logsign.php" class="a2">Login/Signup</a> 
 
</div>

Mit der gleichen Technik können Sie problemlos ein Logo in der Mitte hinzufügen.

.header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    max-width: 960px; 
 
    width: 90%; 
 
    margin: auto; 
 
}

<div class="header"> 
 
    <a href="/" class="a1">Test</a> 
 
    <a href="/">Logo</a> 
 
    <a href="logsign.php" class="a2">Login/Signup</a> 
 
</div>

Quelle

2017-02-08 18:34:54

Ich habe es versucht, aber es ist einfach die TEST und LOGIN in die Mitte des Bildschirms –

@ChristepherArakelian, wenn Sie Hilfe mit Ihrem Code benötigen, müssen Sie eine überprüfbare Demo des Problems erstellen http://StackOverflow.com/Hilfe/mcve –

So trennen Sie Texte in HTML mit CSS

Antwort

HTML

CSS

Verwandte Themen