Having trouble with the spacing between two select fields on a form? Specifically, you want the start time, start time meridian, end time, and end time meridian all in a single line. Any suggestions or solutions to this issue would be greatly appreciated!
Here is the HTML code snippet:
<div class="lable_time">
<div class="stime">
<select value="Start-Time">
<option selected value="null">Start-Time*</option>
<option value="1:00">1:00</option>
<option value="2:00">2:00</option>
</select>
</div>
<div class="stime_meridian">
<select value="AM-PM">
<option selected value="null">AM</option>
<option value="PM">PM</option>
</select>
</div>
<div class="time">
<select value="End-Time">
<option selected value="null">End-Time*</option>
<option value="1:00">1:00</option>
<option value="2:00">2:00</option>
</select>
</div>
<div class="time_meridian">
<select value="AM-PM">
<option selected value="null">AM</option>
<option value="PM">PM</option>
</select>
</div>
</div>
And here is the corresponding CSS code:
.lable_time select{
padding: 15px 30px;
margin: 0;
width: 50%;
font-family: 'Oxygen', sans-serif;
color: #5585C8;
background: white;
border: 1px solid #2744B8;
cursor: pointer;
font-size: 18px;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
outline: none;
-webkit-appearance: none;
border-width: 0;
}
.stime{
float: left;
margin: 30px 0 0 0;
width: 350px;
}
.stime_meridian{
float: left;
margin: 30px 10px 0 -170px;
width: 220px;
border-spacing: 30px 10px;
}
.time{
float: left;
margin: 30px 0 0 -170px;
width: 350px;
}
.time_meridian{
float: left;
margin: 30px 0 0 -170px;
width: 220px;
}