简体   繁体   中英

How to position a set of div elements side by side?

I have placed two div elements contained in a form. My aim is to place the second div "App" side by side with the "Status" div like in the mock up below:

What I've tried so far is the following, setting the align="right" which positions the div on the extreme right.

Also I tried setting style="margin-left: which places the second div underneath and too far right of the first div.

Question:

Does anyone know how I can place the second div in line and side by side with the first div?

Form markup:

      <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 ^^-->

You can set both divs to display: inline-block.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM