表单的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

如果使用bootstrap会更有效，否则必须制作3个div元素，并将每个元素放置在其中一个元素（例如column）中并指定宽度，然后可以将float添加到此元素并完成操作：

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

Answer 2

您可以将列放在<div> 。 这是jsfiddle中的示例。

我删除了文本输入的宽度，并在包装​​div中添加了以下CSS：

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

另外，如建议的那样，这是用<label>而不是<div>的小提琴 。