CSS макет жидкости для входов

Question

Я в настоящее время делает веб-сайт и страницу регистрации необходимо:
- первое имя
- фамилия
- имя пользователя
- электронный
- пароль
- перепечатать пароль
Мне нужны первые имена и фамилии, которые должны быть рядом друг с другом, а маленькие, а остальные ниже их примерно в два раза больше ширины. Как это:

Name 
+-----------+ +-----------+ 
| first  | | last  | 
+-----------+ +-----------+ 

Email 
+----------------------------+ 
|       | 
+----------------------------+ 

Я чрезвычайно против использования px и абсолютно необходимо использовать % для ширин.
Я не могу сделать небольшие входы 50% и большие 100%, потому что пространство между двумя маленькими не учитывается, вы знаете?
Я говорю о это пространстве:

Name 
+-----------+ +-----------+ 
| first  |<-->| last  | 
+-----------+ +-----------+ 

Так вот почему я не могу использовать 50% для маленьких и 100% для крупных!
Любая помощь очень ценится!

Answer 1

Простой сделать это:

вызов маленькие: половина

.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% (вы можете делать все, что захотите, если оно равно ...). Я сделал класс под названием . Первый, чтобы все выглядело правильно (вы можете использовать jquery для создания этого автокласса).

Heres огурчик:

FIDDLE THAT

Надеется, что это помогает.

Answer 2

Вот 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; 
} 

Answer 3

, если вы применяете 100% с на входе элемента будет переливаться в поле Див потому входной элемент имеет некоторые умолчанию отступы, для идеальное решение, вы должны использовать это:

Ваш 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> 

Вы можете оформить эту страницу, чтобы узнать, как согласовать макет с поплавком - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php