Hallo ich versuche ein Menü für eine Loginseite zu erstellen.
Aus irgendeinem Grund rutschen "Logout" und "Konto erstellen" in die nächste Zeile....
Ich hätte sie gerne alle in einer Zeile...
Danke schonmal!!
Code
HTML CODE:
<nav>
<a href="#"><img class="header-logo" src="img/logo.png" alt="Logo"></a>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Impressum</a></li>
</ul>
<!--Hier ist die LoginForm-->
<div class="header-login">
<form action="includes/login.inc.php" method="post">
<input type="text" name="mailuid" placeholder="Benutzername/E-mail...">
<input type="password" name="pwd" placeholder="Passwort...">
<button type="submit" name="login-submit">Login</button>
</form>
<!--Hier geht es zur Anmeldeseite-->
<a class="sign" href="signup.php">Konto erstellen</a>
<!--Hier geht es zum Logoutscript-->
<form action="includes/logout.inc.php" method="post">
<button type="submit" name="logout-submit">Logout</button>
</form>
</div>
</nav>
CSS-Datei:
nav{
width: 100%;
height: 60px;
background-color: #fff;
}
.header-logo{
float:left;
height: 60px;
}
nav ul{
float:left;
}
nav ul li{
float: left;
list-style:none;
}
nav ul li a {
display: block;
font-family: arial;
color:#222;
font-size: 14px;
padding: 22px 14px;
text-decoration: none;
}
.header-login{
float:right;
}
.sign{
float: right;
text-decoration: none;
display: block;
font-family: arial;
color:#222;
font-size: 14px;
padding-right: 10px;
padding-top: 5px;
}
button{
background-color: #777;
color:white;
height:30px;
width: 50px;
border-radius: 2px;
border:none;
cursor: pointer;
}
Alles anzeigen
Ich weiß float ist eher alt und man sollte z.B. Flexbox benutzen, aber mich interessiert warum es nicht funktioniert...