表单的HTML和CSS格式化

我正在构建一个应用程序，它只是从一台机器中用PHP捕获数据并在窗体中显示它。用户然后可以批准表单并将其发送到数据库。我只是在布局上遇到一些问题。该应用程序将在7个英寸平板电脑上运行，并在这里是它看起来像一个7英寸的屏幕上：表单的HTML和CSS格式化

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>

来源

2014-09-01 Oisian2

提示：为什么不使用'label'作为'input'标签而不是'div'？ – melancia 2014-09-01 14:58:10

这将是，如果你使用引导更高效的，否则你必须做出3个div元素，并把每一个到在其中的一个元素喜欢列，并给宽，那么你可以添加浮动到这个元素，并做到：

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

来源

2014-09-01 15:00:40 PashaB

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

我删除的文本输入的宽度和增加了以下的CSS到包装的div：

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

此外，所建议的，在这里是一个fiddle与<label>！而非<div>秒。

来源

2014-09-01 15:05:28

表单的HTML和CSS格式化

回答

相关问题