我可以把表格放在列表项中吗？

Question

我可以把表格放在列表项中吗？

8

我正在尝试修复一个糟糕的嵌套表格布局的网站。页面将具有使用Google图表的变量元素数量。我想使用水平UL而不是在表格单元格内布置内容的复杂代码，以便内容块可以清晰地布置，而不管所涉及的图表如何。我的问题是Google图表组件利用表格。当LI中存在任何表格元素时，LI会移动到下一行（假设是因为默认情况下表格元素在前后都有换行符）。

我已经尝试了表格的各种显示模式，但没有成功。这是个无望的事情吗？

示例HTML代码以说明问题：

<html>
<body>
<style type='text/css'>
 #navlist li{
    display:inline;
    list-style-type:none;
}
</style>
    <ul id='navlist'>
        <li>测试</li>
        <li>测试2</li>
        <li>
            <table style='border:1px solid black'><tr><td>测试</td></tr></table>
        </li>
        <li>测试3</li>
        <li>
            <table style='border:1px solid blue'><tr><td>测试</td></tr></table>
        </li>
        <li>
            <table style='border:1px solid green'><tr><td>测试</td></tr></table>
        </li>
    </ul>
</body>
</html>

- Tim Reynolds

4个回答

0

嗯，这似乎太简单了，难以置信，但我尝试了一下，在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>

- Jeremy Goodell

好的，通过将float: left添加到li样式中，我已经让IE正常工作了。 - Jeremy Goodell

0

是的，这是因为表格默认是块级元素（实际上是display:table，但它的行为类似）。如果您的表格非常简单，则添加display:inline可能有效。

否则，最好的方法是将每个列表元素向左浮动：

#navlist li {
  float: left;
  list-style-type:none;
}

- DisgruntledGoat

0

我建议将一组下拉菜单类型的样式应用于您的显示，这样做的缺点是会稍微复杂化您的标记，但可以更轻松地在适当的时间隐藏/显示表格。它还可以让您拥有大于一行/一个单元格的表格。

如果您需要它们始终可见，则此方法不适用。无论如何，我已经在 jsbin.com 上发布了我的建议演示。

- David Thomas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Heald · Accepted Answer

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