html - テーブルなしでフロート要素を1行で表示する方法

Question

テーブルを使わずにfloat要素を一行で表示したい。ユーザーがウィンドウのサイズを変更すると、要素の行が変更されますが、私はしたくありません。

私が使用するHTMLコードは次のとおりです。

<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>

私のウェブサイトはhttp://greek.netii.net/です。

どの CSS コードを使用すればよいですか?

お時間をいただきありがとうございます！

Answer 1

これを使って、

<style>
.regul{
float:left;
list-style:none;
}
.regul li{
height:25px;
width:150px;
}
</style>
<div style="width:500px;clear:both;">
<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>
</div>

Answer 2

を使用し、その後、いくつかの要素にfloat:lefta を追加しますstyle='clear:both'