简体   繁体   中英

Horizontal spacing with HTML/CSS within parent div

I am attempting to space elements throughout my webpage that are contained within a <div class="card"> from a template I am using. I have been trying to use inline CSS to space elements, as I am new to HTML/CSS and the CSS file from the template is difficult for me to navigate (and understand).

Inline CSS overrides the CSS files contained in the directory, as far as I understand. My elements looks like: PIC1

And I would like them to be spaced like: PIC2

My code looks like:

<div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card ">
                            <div class="card-body">

                            <select class="custom-select">
                                <option selected>Zero</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                                <div class="form-group">
                                    <label for="comment">Input:</label>
                                    <textarea class="form-control" rows="10" id="comment"></textarea>
                                </div>

                                <i class="material-icons" style="font-size: 48px;">arrow_forward</i>


                                <div class="form-group">
                                    <label for="comment">Output:</label>
                                    <textarea class="form-control" rows="10" id="comment"></textarea>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                </div>

I have tried a number of methods to get this to work, and nothing has worked particularly well for me. My question is, how can I achieve the spacing I laid out in the second picture?

You said you wanted inline css, so I did inline css.

  1. We are doing display:inline-block so that we can keep our divs on the same row, float-left so they are positioned as far left as possible without colliding with other elements.
  2. On class custom-select we also set the position to relative which enables us to do top:35px which moves that element down 35 pixels. I did that because that's sort of how it appears in your image.
  3. Finally the use of !important will override ANY css usually unless !important is declared elsewhere, then you may still have a conflict. I highly doubt it's declared elsewhere however as there is no real point to doing it unless you want to override a previous setting.

 <div class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="card "> <div class="card-body"> <select class="custom-select" style="display:inline-block !important;float:left !important;position:relative;top:35px"> <option selected>Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="form-group" style="display:inline-block !important;float:left !important"> <label for="comment">Input:</label> <textarea class="form-control" rows="10" id="comment"></textarea> </div> <i class="material-icons" style="font-size: 48px;display:inline-block !important;float:left !important">-&#8250;</i> <div class="form-group" style="display:inline-block !important;float:left !important"> <label for="comment">Output:</label> <textarea class="form-control" rows="10" id="comment"></textarea> </div> </div> </div> </div> </div> </div> </div> 

JSFIDDLE: https://jsfiddle.net/hw2tv6g1/

That's the CSS I applied to your html.

.card-body > select {
  vertical-align: top;
  }
.card-body > div {
  vertical-align: middle;
  display:inline-block;
  }

Demo link

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