CSS for DIV jQuery-UI
How can I adjust jQuery-ui.css for DIV spacing? I am using jQuery 2.1.0 along with the "smooth" ui. But for some reason I can't figure out how to change the CSS. As you can see in the example below, I've provided my text boxes to be to the right of each other pretty much, I just want a little more spacing or padding between them. I tried using <br>
and it just ends up running out of too many intervals. Any help would be greatly appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="clearfix">
<label for="vin"> Vehicle Identification Number:</label>
<input type="text" name="vin" id="vin" validateat="onSubmit" validate="noblanks" size="30" maxlength="30" required="yes" message="Please enter vehicle identification number."> <span id="result"></span>
</div>
<div class="clearfix">
<select name="month1" id="month1" size="1">
<option value="">Choose a Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="month2" id="month2" size="1">
<option value="">Choose an Option</option>
<option value="2">2</option>
<option value="14">14</option>
</select>
<select name="month3" id="month3" size="1">
<option value="">Choose an Option</option>
<option value="3">3</option>
<option value="15">15</option>
</select>
</div>
<div class="clearfix">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight.">
<label id="gvwLabel"> Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" onfocus="this.select()">
+3
user4122820
source
to share
1 answer
You can use margin
to enter text like:
input[type='text'] {
margin: 10px;
}
<div class="clearfix">
<label for="vin"> Vehicle Identification Number:</label>
<input type="text" name="vin" id="vin" validateat="onSubmit" validate="noblanks" size="30" maxlength="30" required="yes" message="Please enter vehicle identification number."> <span id="result"></span>
</div>
<div class="clearfix">
<select name="month1" id="month1" size="1">
<option value="">Choose a Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="month2" id="month2" size="1">
<option value="">Choose an Option</option>
<option value="2">2</option>
<option value="14">14</option>
</select>
<select name="month3" id="month3" size="1">
<option value="">Choose an Option</option>
<option value="3">3</option>
<option value="15">15</option>
</select>
</div>
<div class="clearfix">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight.">
<label id="gvwLabel"> Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" onfocus="this.select()">
Or you can add margin to the class container clearfix
:
.clearfix {
margin: 10px;
}
<div class="clearfix">
<label for="vin"> Vehicle Identification Number:</label>
<input type="text" name="vin" id="vin" validateat="onSubmit" validate="noblanks" size="30" maxlength="30" required="yes" message="Please enter vehicle identification number."> <span id="result"></span>
</div>
<div class="clearfix">
<select name="month1" id="month1" size="1">
<option value="">Choose a Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="month2" id="month2" size="1">
<option value="">Choose an Option</option>
<option value="2">2</option>
<option value="14">14</option>
</select>
<select name="month3" id="month3" size="1">
<option value="">Choose an Option</option>
<option value="3">3</option>
<option value="15">15</option>
</select>
</div>
<div class="clearfix">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight.">
<label id="gvwLabel"> Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" onfocus="this.select()">
+4
source to share