表单的 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 元素并将每个元素放入其中一个元素，如列并给出宽度，然后你可以向这个元素添加 float 并完成:

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