In an attempt to align my select form fields on the same line, I have tried adding display:inline; to both the select and label elements in my code. However, it did not produce the desired result.
Here is the HTML code snippet:
<form id ="myform1">
<label for='orgUnit'>Organization Unit</label>
<select name="orgUnit" id="orgUnit">
<option value="Select">Please Select an option</option>
</select>
<label for ='org'>Organization</label>
<select name="org" id="org">
<option value="Select">Please Select an option</option>
</select>
<label for ="bu">Business Unit</label>
<select name="bu" id="bu">
<option value="Select">Please Select an option</option>
</select>
<label for ="department">Department</label>
<select name="department" id="department">
<option value="Select">Please Select an option</option>
</select>
<input type="hidden" name="buID" id="buID" >
</form>
The CSS rules applied are as follows:
select {
width: 175px;
}
label {
width:130px;
text-align:right;
padding-right:10px;
}
After making some adjustments by adding the 'for' attribute and removing the br tags, the layout ended up looking like this:
https://i.sstatic.net/9YCKG.png
Fortunately, upon further investigation, I realized that additional CSS was causing the labels to float and appear as they do in the image above.