1

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

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

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

  1. 菜单必须水平填满整个页面[菜单宽度：100%]

  2. 所有菜单单元格（最后一个除外）都应具有随机宽度，具体取决于其内容的宽度 [菜单项的宽度 = 项目内容的宽度]。这意味着它不应该被硬编码。

  3. 最后一个菜单项（带有搜索输入）应拉伸以填充所有剩余空间。[最后一个菜单项填满了剩下的所有空间]。

  4. 整个东西必须支持IE7+。这很愚蠢。我知道。但这是我无能为力的事情。谢天谢地，我不必为 IE6 烦恼。

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

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

非常感谢你的帮助！

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

4

3 回答 3

3

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

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

活生生的例子

编辑：不过，我大多同意凯特的观点。您可能应该将搜索与 the 分开ul并使其正确浮动。

于 2013-10-07T17:22:48.640 回答
1

http://jsfiddle.net/4enMp/5/

ul {
    display: table;
}
li {
    display:table-cell;
    line-height:30px;
}
于 2013-10-07T17:01:27.013 回答
1

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

于 2013-10-07T17:20:58.013 回答