CSS：水平UL，其中LI包含TABLE。可能？

我想修复一个网站的可怕的嵌套表格布局。该页面将具有可变数量的利用Google图表的元素。我不想使用复杂的意大利面条代码来尝试在表格单元格内部放置东西，而是希望使用水平UL，因此无论涉及哪些图表，内容块都将干净地布局。我遇到的问题是Google图表组件的杠杆表。当一个表元素存在于LI内部的任何地方时，LI被移动到下一行（假设因为默认情况下表元素在前后有一个换行符）。CSS：水平UL，其中LI包含TABLE。可能？

我已经尝试了各种显示模式的表没有运气。这是失败的原因吗？

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

来源

2010-09-15 Tim Reynolds

设置你的LI元素display: inline-block;;这应该很好地做到这一点。它在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>

来源

2010-09-15 14:29:18

这在ie7中不起作用，最终得到一个垂直列表。 – 2010-09-15 14:31:09

让我喝点咖啡，并试着让我的大脑开始，我会弄清楚我过去是如何在IE7中解决这个问题的。 :) – 2010-09-15 14:34:08

在IE6中（可能是IE7的声音），您只能将'display：inline-block'应用于最初内联的元素，如''。 – DisgruntledGoat 2010-09-15 14:35:05

好吧，这似乎太容易了，但我试过了，它在FF中工作。 IE仍然在第二行显示一半标签，但它可能是一个简单的修复。我所做的只是添加float：留给三个表格的样式。

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

来源

2010-09-15 14:29:24

好的，通过添加浮动功能让IE浏览器工作：对li风格也是如此。 – 2010-09-15 14:33:06

是的，它是因为表是通过默认块元素（实际上display:table但它以类似的方式起作用）。如果你的表格非常简单，那么给它们添加display:inline可能会起作用。

否则你最好的选择是每个列表元素浮到左：

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

来源

2010-09-15 14:34:02 DisgruntledGoat

我建议将一组下拉菜单式风格到您的显示器，这确实携带复杂的缺点您的标记略有增加，但更容易在适当的时间隐藏/显示表格。它也可以让你拥有大于一行/一格的表格。

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

来源

2010-09-15 14:37:01

CSS：水平UL，其中LI包含TABLE。可能？

回答

相关问题