如何并排定位一组div元素?

时间:2016-05-10 20:15:46

标签: html asp.net twitter-bootstrap layout

我在表单中放置了两个div元素。我的目标是将第二个div“App”与“Status”div并排放置,如下面的模拟:

到目前为止我所尝试的是以下内容,设置{div}位于最右侧的align="right"

此外,我尝试设置style="margin-left:,将第二个div置于第一个div的下方和右侧。

问题:

有谁知道如何将第二个div 排在一起与第一个div?

表单标记:

      <form action="" method="post">
                <div class="form-horizontal">
                    <div class="col-lg-6">


                            <!-- SELECT STATUS STATIC-->
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="Current Status">Status</label>
                                <div class="col-md-8">
                                    <select id="Status" name="Status" onchange="" class=" form-control">
                                        <option value="Down">Down</option>
                                        <option value="Up">Up</option>
                                    </select>
                                </div>
                            </div>


                            <!-- SELECT APP STATIC-->
                            <div class="form-group">
                                <label class="col-md-3 control-label"  for="App">App</label>
                                <div class="col-md-8" >
                                    <select id="App" name="App" onchange="" class=" form-control">
                                        <option value="SAP">SAP</option>
                                        <option value="JAP">JAP</option>
                                    </select>
                                </div>
                            </div>

                    </div>
                </div>
            </form>            <!--END OF FORM ^^-->

1 个答案:

答案 0 :(得分:1)

您可以设置两个div来显示:inline-block。

.form-group {
  display: inline-block;
}