В настоящее время я делаю сайт, и на странице регистрации требуется:
- имя
- Фамилия
- имя пользователя
- Эл. адрес
- пароль
- Повторите ввод пароля
Мне нужны первые имена и фамилии, которые должны быть рядом друг с другом, а маленькие, а остальные ниже их примерно в два раза больше ширины. Как это:
Name
+-----------+ +-----------+
| first | | last |
+-----------+ +-----------+
Email
+----------------------------+
| |
+----------------------------+
Я крайне против использования px
и абсолютно необходимо использовать %
для ширины.
Я не могу сделать небольшие входы 50%
а большие - 100%
потому что пространство между двумя маленькими не учитывается, вы знаете?
Я говорю об этом пространстве:
Name
+-----------+ +-----------+
| first |<-->| last |
+-----------+ +-----------+
Поэтому я не могу использовать 50%
для маленьких и 100%
для больших!
Любая помощь очень ценится!
Просто выполните это:
позвоните маленьким: половина
.first {margin-left: 0 !important; clear: left;}
.full {width:100%}
.half {width: 48%;}
.half {float: left; margin-left: 2%;}
<div class="first half">First Name</div>
<div class="half">Last Name input</div>
<div class="full">Email Input</div>
Как вы можете видеть, я использовал маржу%, чтобы сделать интервал... вот как я сделал 48% -2% (вы можете делать все, что хотите, до тех пор, пока оно равно). Я создал класс под названием .first, чтобы все выглядело правильно (вы можете использовать jquery для создания этого класса auto).
Heres a Fiddle:
Надеюсь, это вам поможет.
Здесь скрипка
<form>
<input name="firstname" type="text" placeholder="First Name" class="small left"/>
<input name="lastname" type="text" placeholder="Last Name" class="small"/>
<input name="username" type="text" placeholder="User Name" class="big"/>
<input name="email" type="text" placeholder="E-mail" class="big"/>
<input name="password" type="password" placeholder="Password" class="big"/>
<input name="rpassword" type="password" placeholder="Repeat Password" class="big"/>
<button name="submit" type="">Sign Up</button>
</form>
form {
background: #555;
width: 350px;
height: 300px;
text-align: center;
padding: 30px 15px;
border-radius: 10px;
}
button {
background: #04a9e8;
position: relative;
margin: 25% auto;
width: 140px;
height: 24px;
border: 1px solid #444;
letter-spacing: 1px;
font-weight: bold;
color: #fff;
border-radius: 4px;
}
button:hover {
background: #02b9fc;
}
.small,
.big {
background: #f5f5f5;
height: 22px;
padding-left: 4px;
margin-bottom: 12px;
border: 1px solid #444;
}
.small:focus,
.big:focus {
background: #fff;
outline: none;
border: 1px solid #0296cc;
box-shadow: 0 0 2px 0 #0296cc;
}
.small {
width: 45.5%;
}
.big {
width: 98.1%;
}
.left {
margin-right: 15px;
}
если вы примените 100% с элементом ввода, он переполнит поле div, потому что элемент ввода имеет по умолчанию дополнение, для идеального решения вы должны использовать это:
Ваш CSS:
input{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
.clearfix { clear: both; }
.first, .last{ width: 48%; }
.first{ float: left; }
.last{ float: right; }
.email{ width: 100%;}
Ваш HTML:
<div class="clearfix">
<label>Name</label><br>
<input type="text" class="first">
<input type="text" class="last">
</div>
<div class="clearfix">
<label>Email</label><br>
<input type="text" class="email">
</div>
Вы можете проверить эту страницу, чтобы узнать, как выровнять макет с помощью float - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php