Html CSS：水平 UL，其中 LI 包含一个 TABLE。可能的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3718518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Horizontal UL where LI contains a TABLE. Possible?
提问by Tim Reynolds
I am trying to fix a horrid nested table layout for a site. The page will have a variable number of elements that leverage Google charts. Instead of complex spaghetti code that tries to lay things out inside of table cells I want to use a horizontal UL so the content blocks will lay out cleanly regardless of the charts involved. The problem I am having is the Google charts components leverage tables. When a table element exists anywhere inside a LI the LI gets moved to the next line (assuming because table elements by default have a newline before and after).
我正在尝试修复站点的可怕嵌套表格布局。该页面将具有可变数量的利用 Google 图表的元素。我想使用水平 UL，而不是试图在表格单元格内布置东西的复杂意大利面条式代码，这样无论涉及的图表如何，内容块都会干净利落地布置。我遇到的问题是 Google 图表组件利用表格。当表元素存在于 LI 内的任何位置时，LI 将移动到下一行（假设因为表元素默认情况下在前后都有换行符）。
I have tried the various display modes for the table with no luck. Is this a lost cause?
我已经尝试了桌子的各种显示模式，但没有成功。这是一个失败的原因吗？
Example HTML code to illustrate the issue:
用于说明问题的示例 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>
采纳答案by Chris Heald
Set display: inline-block;on your LI elements; that should do it nicely. It doesn't really work in Firefox 2, but nobody uses Firefox 2 anymore. You'll need to specify a doctype to get it to work in IE.
设置display: inline-block;在你的 LI 元素上；那应该做得很好。它在 Firefox 2 中实际上不起作用，但没有人再使用 Firefox 2。您需要指定一个 doctype 才能使其在 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>
回答by Jeremy Goodell
Well, this seems too easy to be true, but I tried it and it worked in FF. IE still displays half the tags on the second line, but it could be a simple fix. All I did was add float: left to the styles for the three tables.
嗯，这似乎太容易了，但我试过了，它在 FF 中有效。IE 仍然在第二行显示一半的标签，但这可能是一个简单的修复。我所做的只是添加 float: left 给三个表的样式。
<html>
<body>
<style type='text/css'>
#navlist li{
display:inline;
list-style-type:none;
float: left;
}
</style>
<ul id='navlist'>
<li>TEST1</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black; float: left;'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue; float: left;'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green; float: left;'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
回答by DisgruntledGoat
Yes it's because tables are by default block elements (well, actually display:tablebut it acts in a similar manner). If your tables are very simple then adding display:inlineto them may work.
是的，这是因为表格在默认情况下是块元素（嗯，实际上，display:table但它的行为方式类似）。如果您的表非常简单，那么向display:inline它们添加可能会起作用。
Otherwise your best bet is to float each list element to the left:
否则，最好的办法是将每个列表元素浮动到左侧：
#navlist li {
float: left;
list-style-type:none;
}
回答by David says reinstate Monica
I'd suggest applying a set of drop-down menu type styles to your display, this does carry the disadvantage of complicating your mark-up slightly, but makes it easier to hide/display the tables at appropriate times. It also lets you have larger than one-row/one-cell tables.
我建议将一组下拉菜单类型样式应用于您的显示，这确实具有使标记稍微复杂化的缺点，但可以更轻松地在适当的时间隐藏/显示表格。它还允许您拥有大于单行/单单元格的表格。
If you need them to be visible at all times, though, then this approach isn't applicable. Regardless, I've posted a demo of my suggestion on jsbin.com
但是，如果您需要它们始终可见，则此方法不适用。无论如何，我已经在jsbin.com上发布了我的建议的演示
