Я пытаюсь разместить поля ввода для входа в ту же строку, что и заголовок h1. Однако я борюсь с этим. Я читал, что вы должны оставить поля ввода с плавающей запятой, но все кажется смещенным.
index. html
<body>
<div class="menu-bar menu-bar__title">
<h1>Power List App</h1>
<div class="menu-bar__login">
<form action="">
<label for="username"></label>
<input type="text" id="username" name="username" placeholder="Username">
<label for="password"></label>
<input type="text" id="password" name="password" placeholder="Password">
<input type="submit" value="Login">
</form>
</div>
</div>
<div class="registration-section">
<h2>What is a power list?</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<h1>Register Here:</h1>
<form action="">
<label for="username-register"></label>
<input type="text" id="username-register" placeholder="Username">
<br></br>
<label for="fn-register"></label>
<input type="text" id="fn-register" placeholder="First Name">
<br></br>
<label for="email-register"></label>
<input type="text" id="email-register" placeholder="Email">
<br></br>
<label for="gender-registration"></label>
<select name="gender" id="gender-registration">
<option value="" disabled selected>Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br></br>
<label for="password-register"></label>
<input type="text" id="password-register" placeholder="Password">
<br></br>
<input type="submit" value="Register">
</form>
</div>
<footer>
<a href="">Created by: Cerdafied Development</a></p>
<p>Follow Me On:</p>
<p>Instagram</p>
<p>Yo</p>
</footer>
</body>
**_menu-bar.css**
.menu-bar {
border-bottom: 1px solid red;
&__title {
font-weight: 300;
color: $mainRed;
float: left;
}
&__login {
float: right;
}
@mixin clearfix;
}
введите описание изображения здесь
Было бы признательно за объяснение того, что я делаю неправильно.
Мне нужен заголовок приложения Power List, встроенный во входные данные для входа, чтобы я мог добавить к нему нижнюю границу.
Спасибо.