我正在尝试为网站修复一个可怕的嵌套表格布局。该页面将具有可变数量的利用 Google 图表的元素。我想使用水平 UL，而不是尝试在表格单元格内放置内容的复杂意大利面条代码，这样内容 block 将干净地布局，而不管涉及的图表如何。我遇到的问题是 Google 图表组件利用表格。当表元素存在于 LI 内的任何位置时，LI 将移动到下一行(假设因为默认情况下表元素前后都有一个换行符)。
我尝试了表格的各种显示模式，但没有成功。这是一个失败的原因吗？
用于说明问题的示例 HTML 代码:
<html>
<body>
<style type='text/css'>
#navlist li{
display:inline;
list-style-type:none;
}
</style>
<ul id='navlist'>
<li>TEST</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
最佳答案
在您的 LI 元素上设置 display: inline-block;；那应该做得很好。它在 Firefox 2 中实际上不起作用，但没有人再使用 Firefox 2。您需要指定文档类型才能在 IE 中使用。
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#navlist li {
display: inline-block;
zoom: 1;
*display: inline;
list-style-type: none;
vertical-align: middle;
}
</style>
</head>
<body>
<ul id='navlist'>
<li>TEST</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
关于html - 我可以在列表项中放置表格吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3718518/