У меня есть код, написанный на html5, в котором у меня есть логотип, некоторые навигационные ссылки. Также есть форма входа в систему с двумя текстовыми полями и 3 кнопками. Я хочу сделать так, чтобы мой логотип и ссылки на панели навигации были расположены слева, а моя форма входа с кнопками справа. я хочу точный стиль, показанный на изображении ниже
HTML-код:
<body>
<header>
<nav class="nav-header-main">
<a class="header-logo" href="index.php">
<img src="img/logo.png" alt="mmtuts logo">
</a>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="header-login">
<form action="includes/login.inc.php" method="post">
<input type="text" name="mailuid" placeholder="Username/E-mail...">
<input type="password" name="pwd" placeholder="Password...">
<button type="submit" name="login-submit">Login</button>
</form>
<a href="signup.php">Signup</a>
<form action="includes/logout.inc.php" method="post">
<button type="submit" name="logout-submit">Logout</button>
</form>
</div>
</nav>
</header>
Файл CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #d3d3d3;
height: 100vh;
width: 100%;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: inline;
background-color: #fff;
}
.header-logo img {
height: 40px;
margin-top: 10px;
}