gpt4 book ai didi

html - 我可以在列表项中放置表格吗?

转载 作者:太空狗 更新时间:2023-10-29 14:16:57 26 4
gpt4 key购买 nike

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com