我可以用一张桌子在5秒钟内完成这个但是我试图通过使用CSS来避免它,在FF中看起来很好但问题是它在IE中不起作用(第二个li出现在第一个li下面)
<ul style="list-style-type:none; margin:0px; padding:0px">
<li style="width:120px; display:table-cell; padding: 1px;"><?=$m['make']?></li>
<li style="width:30px; display:table-cell; padding: 1px;"><input id="changemanufacturer" type="checkbox"></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
Tom*_*len 10
不要使用表格单元格.做:
<li style="width:120px; display:inline; float:left;">Boo!</li>
Run Code Online (Sandbox Code Playgroud)
当然你应该把你的CSS外部,但我认为它只是为了简化问题.
如果您使用的是 IE7 或 IE8,请确保您的 DOCTYPE 存在,以便它不会以怪异模式呈现。
在 IE8 中使用 HTML4 Strict 或 HTML5 DOCTYPES 对我有用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<ul style="list-style-type:none; margin:0px; padding:0px">
<li style="width:120px; display:table-cell; padding:1px;">asdf</li>
<li style="width:30px; display:table-cell; padding: 1px;">
<input id="changemanufacturer" type="checkbox">
</li>
</ul>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
HTML5:<!DOCTYPE html>