组重叠

组重叠

关注
发信
关注(28)粉丝(399)

html - 如何使表格组重叠？

我正在为联系信息构建一个简单的横向表单，其中包括一个用于注释的文本区域。我要将该地址块向上移动到的文本区域的左侧有大量空白。我不知道如何使表单组重叠，或者甚至是可能的。我尝试将所有电话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>




Phone 2/Text area form-group

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;
}

最佳答案

为了达到您的预期结果，我将div与类地址一起使用，并将地址字段和position：relative与top一起包含在内

.address{
  position:relative;
  top:-205px;
}


http://codepen.io/nagasai/pen/NAaNkK

HTML：

<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="address">
            <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>
                <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>


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;
}

.address{
  position:relative;
  top:-205px;
}


希望这对你有用

07-24 16:34
Powered by LMLPHP ©2024 组重叠 0.032676