html - 如何在没有表格的情况下在一行中显示浮动元素

Question

我想在一行中显示浮动元素而不使用表格。当用户调整窗口大小时，元素会改变线，但我不想要。

我使用的 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

使用float:left, 然后将 a 添加style='clear:both'到某个元素

Answer 2

用这个，

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