Benötigen Sie Hilfe beim Ausrichten von NETFLIX, ausgewählten Tags und Anmeldeschaltflächen in einer Zeile?
P粉769045426
2023-08-02 16:46:59
<p>Ich habe versucht, die Schriftart „display: flex;“ zu ändern: „width“, „height“, „display-inline“ und „inline-block“, konnte das Problem aber nicht lösen. </p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clone@Netflix</title>
<link rel="stylesheet" href="netflix.css">
</head>
<Körper>
<Kopfzeile>
<nav class="navigation">
<h2>NETFLIX</h2>
<span class="Sprache">
<select name="#" id="lang_inner">
<option value="de">Englisch</option>
<option value="hi">Hindi</option>
<option value="ar">Arabisch</option>
<option value="es">Espaniol</option>
</select>
</span>
<button class="signin_button">Anmelden</button>
</nav>
</header>
</body>
</html></pre>
<pre class="brush:php;toolbar:false;">*{
Rand:0;
Polsterung:0;
Boxgröße: border-box;
Schriftfamilie: serifenlos;
}
Header{
Position:absolut;
Anzeige:flex;
justify-content: Leerzeichen dazwischen;
align-items: center;
Höhe: 100 VH;
Breite: 100 %;
}</pre>
<p><br /></p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你可以用float: left;:
*{ margin:0; padding:0; box-sizing: border-box; font-family: sans-serif; } header{ position:absolute; display:flex; justify-content: space-between; align-items: center; height:100vh; width: 100%; } header .navigation * { float: left; } header .navigation > :not(h2) { margin-top: 5px; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Clone@Netflix</title> <link rel="stylesheet" href="netflix.css"> </head> <body> <header> <nav class="navigation"> <h2>NETFLIX</h2> <span class="language"> <select name="#" id="lang_inner"> <option value="en">English</option> <option value="hi">Hindi</option> <option value="ar">Arabic</option> <option value="es">Espaniol</option> </select> </span> <button class="signin_button">Sign in</button> </nav> </header> </body> </html>