Дошел до урока 5.5 верстки сайта о кино. Сделал оба дива: поиск и вход. Интересно, почему у input и кнопок в одном и том же div class (sidebar) разный размер. Думал, из-за разной длины слов Вход и Найти, проверил - не помогло. Все параметры input, btn class и div class идентичны, но хотелось бы, чтобы было выравнивание верхнего и нижнего дивов по input, иначе они выглядят очень коряво. Кто-нибудь знает, почему так? Спасибо!
код взял прямо из урока. Наверное это вообще больше вопрос к преподавателю. У него на этом сайте о кино из урока HTML/CSS такая же проблема: поле с placeholder "Ваш запрос" уже, чем поля с placeholder логин и пароль, а кнопка Найти шире чем кнопка Вход, хотя согласно HTML и CSS они должны быть идентичными.
Вот HTML
<h2>Поиск</h2>
<form method="post" action="#" id="search_form">
<input type="search" name="search_field" placeholder="ваш запрос"/>
<input type="submit" class="btn" value="найти"/>
</form>
</div>
<div class="sidebar">
<h2>Вход</h2>
<form method="post" action="#" id="login">
<input type="text" name="login_field" placeholder="логин"/>
<input type="password" name="password_field" placeholder="пароль"/>
<input type="submit" class="btn" value="вход"/>
<div class="lables_passreg_text">
<span><a href="#">забыли пароль?</a></span> | <span><a href="#">регистрация</a></span>
</div></form>
Вот CSS
.sidebar {
float: right;
width: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #f2f2f2;
border-radius: 5px;
background-color: #f9f9f9;
}
.btn {
padding: 8px;
background-color: white;
cursor: pointer;
}
input[type="text"], input[type="password"], input[type="search"] {
color: #5d5d5d;
width: 60%;
padding: 8px;
}
input, textarea {
outline: none;
border: none;
border: solid 1px #f2f2f2;
}
Пишу полный код input'ов с css. <div class="sidebar"> был задан, просто забыл его добавить. Как советовали, добавил width для кнопки - ура, кнопки стали одинаковыми по ширине. Но ширина input'ов упорно сопротивляется: создал class="shirina", задал единый размер, размер меняется, но ширина увеличивается пропорционально и продолжает оставаться разной у input для запроса и у input для логин-пароль. Мистика какая-то, идентичный код - ширина полей разная. Может, class в input как-то по-другому работает?
HTML
<div class="sidebar">
<h2>Поиск</h2>
<form method="post" action="#" id="search_form" class="shirina">
<input type="search" name="search_field" placeholder="ваш запрос"/>
<input type="submit" class="btn" value="найти"/>
</form>
</div>
<div class="sidebar">
<h2>Вход</h2>
<form method="post" action="#" id="login" class="shirina">
<input type="text" name="login_field" placeholder="логин"/>
<input type="password" name="password_field" placeholder="пароль"/>
<input type="submit" class="btn" value="вход"/>
<div class="lables_passreg_text">
<span><a href="#">забыли пароль?</a></span> | <span><a href="#">регистрация</a></span>
</div>
</form>
</div>
CSS
.sidebar_container {
float: right;
width: 224px;
}
.sidebar {
float: right;
width: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #f2f2f2;
border-radius: 5px;
background-color: #f9f9f9;
}
.shirina {
float: left;
width: 160px;
}
.btn {
float: right;
width: 60px;
padding: 8px;
background-color: white;
cursor: pointer;
}
.sidebar h2 {
color: #136cb2;
}
.lables_passreg_text {
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%;
}
для input И кнопок задаются стили, в них нужно смотреть что не так по коду - возможно где-то пробел лишний, поэтому стиль к этому input не применяется, а к остальным применяется. вообщем смотреть код надо, чтобы точно сказать
действительно для input'ов заданы одинаковые стили,
вижу что причина может быть что для первого блока в коде не задан сам блок, т.е. отсутствует <div class="sidebar">
для кнопок ширина не задана, поэтому они будут разными - по ширине текста кнопки с отступами. если нужно сделать единую ширину кнопок - надо задавать ширину
