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:
And I would like them to be spaced like:
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.
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. 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. !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">-›</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;
}
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.