CSS:水平UL,其中LI包含TABLE.可能？

Question

CSS:水平UL,其中LI包含TABLE.可能？

Tim*_*lds 7 html css html-table horizontallist

我正在尝试为网站修复一个可怕的嵌套表格布局.该页面将具有可变数量的利用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>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>

Answer 1

Chr*_*ald 5

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，2 月前
查看次数：	19666 次
最近记录：	8 年，5 月前