表格布局没有替代方案？答案

【问题标题】：No alternative for table layout?表格布局没有替代方案？
【发布时间】：2013-10-14 08:39:28
【问题描述】：

我明白。表格只能用于表格数据，在任何情况下都不能用于布局。我曾经用很多表编写代码，但几年前我找到了在每种情况下用更合适的结构替换它们的方法。 除了一个。

<ul>
<li>We're up</li>
<li>all night</li>
<li>to get</li>
<li>lucky</li>
<li class="last_one"><input type="search" placeholder="I'm search"></li>
</ul>

这是小提琴： http://jsfiddle.net/4enMp/4/

我正在尝试在这里制作菜单。我的要求：

菜单必须水平填满整个页面[菜单宽度：100%]
所有的菜单单元格（除了最后一个）都应该有随机的宽度，取决于它们内容的宽度[菜单项的宽度=项目内容的宽度]。这意味着它不应该被硬编码。
最后一个菜单项（带有搜索输入）应拉伸以填充所有剩余空间。 [最后一个菜单项填满剩下的所有空间]。
整个必须支持IE7+。很傻。我知道。但这是我无能为力的事情。谢天谢地，我不必为 IE6 烦恼。

正如我在 JS Fiddle 中说明的那样，使用表格很容易做到这一点（尽管我并不声称它是 100% 正确的，但它在浏览器中是一致的）。

我没有设法通过无序列表满足这 4 个要求（参见上面的小提琴）。对于如何仅使用 HTML 和 CSS 实现它的任何想法，我将不胜感激。

非常感谢您的帮助！

编辑：这是我想要的菜单设计：

【问题讨论】：

标签： html css menu html-lists tablelayout

【解决方案1】：

您当前的问题似乎是最后一个li 是width: 100%，这将使li 成为ul 的大小，从而被推离“屏幕”。

一个简单的解决方法是让li 有一个position:absolute;。

Live example

编辑：不过，我基本上同意凯特的观点。您可能应该将搜索与 ul 分开，然后将其浮动。

【讨论】：

山姆，我的评论是为了符合凯特的建议。我无法评论其他人的答案，因为我还没有声誉。您需要将背景设置为包装<div>，然后将背景设置为<li> 以将其设置为活动链接
感谢您的帮助，乔瓦尼

【解决方案2】：

我不明白为什么您需要将输入字段与菜单放在同一元素中。它们提供完全不同的功能。我可能会通过将输入字段从无序列表中分离出来并使其正确浮动来解决此问题。它使用了更多的 HTML，但完全有效。

【讨论】：

我没有。如果可以使用两个单独的浮动元素来做到这一点，那么它适合我。但是菜单应该看起来很单一。这是我真正的菜单：!Menu。如您所见，我不能为 2 个元素应用 1 个背景：由于特定的活动（按下）菜单项设计，只有
应该有背景

确实如此。您需要用 div 包装无序列表和搜索字段，并将背景应用于 div 而不是无序列表。

好的。但是在这种情况下，我如何设置活动按钮的样式，就像它在图片上显示的那样（看起来它被按下了，所以没有渐变背景）？

通过将您的“活动”背景放在列表项上？它将与您的渐变重叠。

好吧。如您所见，文档的背景是一种图案。在这种情况下像你说的那样做是可以接受的，因为用户不太可能看到身体和“活动”背景之间的区别......如果背景不是那么简单，这种方法就会失败。所以，这就是为什么我最好检查你的答案。非常感谢你的帮助！但我很高兴看到不依赖背景的通用解决方案......