I need help to align float elements in a single line without resorting to tables. As the user resizes the browser window, the elements currently break onto separate lines which is not the desired outcome.
Here is the HTML code snippet I am using:
<ul class='regul'>
<li>First name:</li>
<li>Last name:</li>
<li>Email:</li>
<li>Confirm email:</li>
<li>Password:</li>
<li>Confirm password:</li>
<li>Sex:</li>
<li>Date of birth:</li>
<li><input class='button' type='submit' name='action' value='Register' /></li>
</ul>
<ul class='regul'>
<li><input type='text' name='fname' id='fname' /></li>
<li><input type='text' name='lname' id='lname' /></li>
<li><input type='text' name='email' /></li>
<li><input type='text' name='cemail' /></li>
<li><input type='password' name='pass' /></li>
<li><input type='password' name='cpass' /></li>
<li><select name='sex'><option value='male'>Male</option><option value='female'>Female</option></select></li>
<li>
<input type='text' name='day' size='2' maxlength='2' />
<input type='text' name='month' size='2' maxlength='2' />
<input type='text' name='year' size='4' maxlength='4' />
</li>
</ul>
You can visit my website at .
Any advice on which CSS code I should implement would be greatly appreciated.
Thank you for your assistance!