【发布时间】：2016-11-11 12:53:40
【问题描述】：
我正在为联系信息构建一个简单的水平表单，其中包括一个用于注释的文本区域。我想将地址块向上移动的文本区域左侧有大量空白空间。我不知道如何让表单组重叠，或者是否有可能。我尝试将所有电话 2 字段和地址字段放在同一列中，并使用<br> 分隔行，但这绝对不是正确的。这是表单组如何显示的相关代码和屏幕截图。任何提示将不胜感激。
<html>
<body>
<?php require_once ("includes/php/header.php"); ?>
<div class="container-fluid">
<form id="newContact" action="newContact.php" method="POST" class="form-horizontal">
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label">
Vendor
</label>
</div>
<div class="col-md-2">
<select name="vendID" class="form-control">
<option disabled selected value=""> - select a vendor - </option>
<?php
$result = vendorDB::getInstance()->vendorList();
while ($row= mysqli_fetch_array($result)):
?>
<option value="<?php echo $row["VEND_ID"];?>"><?php echo $row["VEND_NAME"];?></option>
<?php
endwhile;
mysqli_free_result($result);
?>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label twoline-label">
First Name
</label>
</div>
<div class="col-md-2">
<input type="text" name="contFirst" class="form-control" />
</div>
<div class="col-md-1">
<label class="control-label twoline-label">
Last<br/>Name
</label>
</div>
<div class="col-md-2">
<input type="text" name="contLast" class="form-control" />
</div>
<div class="col-md-1">
<label class="control-label twoline-label">
E-mail Address
</label>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" name="contEmail" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label" style="padding-top: 7px">
Phone 1
</label>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<input type="text" name="contPhone1" class="form-control" placeholder="555-555-5555" />
</div>
</div>
<div class="col-md-1">
<select name="contPhone1Type" class="form-control">
</select>
</div>
<div class="col-md-1">
<label class="control-label">
Notes
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label" style="padding-top: 7px">
Phone 2
</label>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<input type="text" name="contPhone2" class="form-control" placeholder="555-555-5555" />
</div>
</div>
<div class="col-md-1" >
<select name="contPhone2Type" class="form-control">
</select>
</div>
<div class="col-md-6">
<textarea form="newContact" name="contNote" class="form-control"
rows="11" style="resize: none" placeholder="(optional)"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<label class="control-label">
Address
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<input type="text" name="contAddr1" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<input type="text" name="contAddr2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<label class="control-label">
City
</label>
</div>
<div class="col-md-1">
<label class="control-label">
State
</label>
</div>
<div class="col-md-2">
<label class="control-label">
ZIP
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<input type="text" name="contAddrCity" class="form-control" />
</div>
<div class="col-md-1">
<select name="contAddrState" class="form-control">
</select>
</div>
<div class="col-md-1">
<input type="text" name="contAddrZip" class="form-control" />
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-3">
<span class="icon-input-btn">
<span class="glyphicon glyphicon-ok"></span>
<input type="submit" class="form-control btn btn-primary" value="Save New Contact"/>
</span>
</div>
<div class="col-md-2 col-md-offset-3">
<span class="input-group-btn">
<span class="icon-input-btn">
<span class="glyphicon glyphicon-repeat"></span>
<input type="reset" class="form-control btn btn-default" value="Reset" />
</span>
</span>
</div>
</div>
</form>
</div>
</body>
First form-group of address block
CSS
td,
th{
text-align: left;
}
.nav-tabs{
margin-bottom: 20px;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a{
color: black;
border-top-color: #ccc;
border-right-color: #ccc;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border-color: #ccc;
border-bottom-color: transparent;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year{
color: white;
background-color: black;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #fff;
background-color: #6a6a6a;
}
.error{
color: #c00;
font-size: 125%;
}
.icon-input-btn{
display: inline-block;
position: relative;
}
.icon-input-btn input[type="submit"]{
padding-left: 2em;
}
.icon-input-btn input[type="reset"]{
padding-left: 2em;
}
.icon-input-btn .glyphicon{
display: inline-block;
position: absolute;
left: 0.65em;
top: 30%;
}
.tableheader{
border-color: black;
border-style: solid;
border-width: 0 1px 0 1px;
background-color: #D8D8D8;
font-weight: bold
}
.glyphicon{
top: 0px;
}
.form-horizontal .control-label{
display: inline-block;
vertical-align: middle;
float: none;
text-align: left;
padding-top: 0px;
}
.form-horizontal .controls {
display: inline-block;
margin-left: 20px;
}
【问题讨论】：
-
添加你的 CSS。我复制了您的代码，但它看起来不像图像上的那样。
-
糟糕！抱歉...现在添加。
-
没有任何改变。我在您的 HTML 中没有看到
form-horizontal类。 -
抱歉，我发布的原始代码似乎没有包含完整的表单。已添加整个主体。
标签： html css forms twitter-bootstrap-3