Форматирование HTML и CSS формы

Question

Я создаю приложение, которое просто захватывает данные с компьютера с помощью PHP и показывает его в форме. Затем пользователь может утвердить форму и отправить ее в базу данных. У меня просто проблемы с макетом. Приложение будет работать на 7-дюймовых планшетов, а вот то, что он выглядит как на 7-дюймовый экран:

http://imgur.com/GuVR7YW

Как вы можете видеть имена полей и коробки не выстраиваются в линию, и независимо от того, что я пытаюсь, я не могу заставить их выстраиваться в очередь друг с другом.

Вот CSS:

[class*="fontawesome-"]:before { 
    font-family: 'FontAwesome', sans-serif; 
} 

body { 
    background: #0066AF; 
    color: #606468; 
    font: 87.5%/1.5em 'Open Sans', sans-serif; 
    margin: 0; 
} 

input { 
    border: none; 
    font-family: 'Open Sans', Arial, sans-serif; 
    font-size: 16px; 
    line-height: 1.5em; 
    padding: 0; 
    -webkit-appearance: none; 
} 

p { 
    line-height: 1.5em; 
} 

after { 
    clear: both; 
} 

#login { 
    // width: 320px; 
} 

#login form { 
    text-align: center; 
    margin: auto; 
    padding: 22px 22px 22px 22px; 
    width: 95%; 
    border-radius: 40px; 
    background: #282e33; 
    border-top: 3px solid #434a52; 
    border-bottom: 3px solid #434a52; 
    margin-top: 10px; 
} 

#login form span { 

} 

#login form input[type="text"] { 
    background-color: #3b4148; 
    border-radius: 0px 3px 3px 0px; 
    color: #fff; 
    margin-bottom: 1em; 
    padding: 0 16px; 
    width: 210px; 
    height: 50px; 
    text-align: center; 
} 

#login form input[type="password"] { 
    background-color: #3b4148; 
    border-radius: 0px 3px 3px 0px; 
    color: #fff; 
    margin-bottom: 1em; 
    padding: 0 16px; 
    width: 235px; 
    height: 50px; 
} 

#login form input[type="submit"] { 
    background: #b5cd60; 
    border: 0; 
    width: 100%; 
    height: 40px; 
    border-radius: 3px; 
    color: black; 
    cursor: pointer; 
    transition: background 0.3s ease-in-out; 
    margin-bottom: 20px; 
    margin-top: 6px; 
    font-size: 20px; 
} 

#login form input[type="submit"]:hover { 
    background: #16aa56; 
} 

.HeadLable{ 
    display: -webkit-inline-box; 
    color: #D6D6D6; 
} 

А вот HTML-

<div id="login"> 
    <div id="status"></div> 
    <form method="post" action="<?php echo URL; ?>mcmonitor/create"> 
     <Div class="HeadLable">Op Number:</div> 
     <input type="text" name="OpNo" readonly Value="<?php echo Session::get('OpNo') ?>"> 
     <Div class="HeadLable">Machine Number:</div> 
     <input style="" type="text" name="MachineNo" value="<?php echo Session::get('MachineNo') ?>"> 
     <Div class="HeadLable">W/o Number :</div> 
     <input type="text" name="WoNumber" readonly Value="<?php echo Session::get('WoNumber') ?>"> 
     <Div class="HeadLable">Start time :</div> 
     <input type="text" name="StartTime" id="StartTime" readonly Value="<?php echo  Session::get('StartTime') ?>"> 
     <Div class="HeadLable">Good Count :</div> 
     <input type="text" name="goodcount" readonly Value="<?php echo Session::get('goodcount') ?>"> 
     <Div class="HeadLable">Scrap :</div> 
     <input type="text" name="scrap" readonly Value="<?php echo Session::get('scrap') ?>"> 
     <input type="submit" value='Send data & Log Off ' autocomplete="off" /> 
    </form> 
    <form method="post" action="<?php echo URL; ?>mcmonitor/update"> 
     <input style="visibility: hidden;" type="text" name="MachineNo" readonly value="<?php echo Session::get('MachineNo') ?>"> 
     <input style="visibility: hidden;" type="text" name="StartTime" id="StartTime" readonly Value="<? php echo Session::get('StartTime') ?>"> 
     <input type="submit" value="Update" autocomplete="off" style=" margin-top: -60px;"> 
    </form> 

Answer 1

Это будет более эффективным, если вы используете загрузчик, в противном случае вы должны сделать 3 DIV элементы и положить друг на элемент в одном из них, как колонка, и дать ширину, то вы можете добавить float к этим элементам и сделать:

#login form input[type="text"] { 
    float: right; 
} 

Answer 2

Вы можете поместить столбцы в <div>. Вот пример в jsfiddle.

я удалил ширину текстовых входов и добавил следующий CSS к обертке дивы:

.wrapper { 
    width: 30%; 
    display: inline-block; 
} 

Кроме того, как было предложено, здесь является fiddle с <label> с вместо <div> с.