3

我正在尝试构建一个水平菜单，将最后一项分开并定位正确，以便在最后一项和倒数第二项之间找到一个徽标。

这就是最终的结果

Firefox、Opera (Presto) 甚至 Redmond (9.0+) 中的脏软件都像我预期的那样渲染它。但是 WebKit（Chrome 和 Safari 都呈现相同的内容）在倒数第二个项目之后占用了一些空间，而最后一个项目在没有position: absolute.

<header>Logo</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Statistics</a></li>
        <li><a href="#">Data Management</a></li>
        <li><a href="#">Market Research</a></li>
        <li><a href="#">Web &amp; Apps</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

我将列表显示为table和列表项显示为table-cell因为我希望菜单的左侧部分（第一个到倒数第二个项目，左到徽标）具有固定宽度，而项目采用其内容所需的宽度。文本可以更改为任何内容。到那里为止，一切都很好。但是，如果我给最后一项 a display: block; position: absolute，WebKit 会呈现该间隙（示例中为白色）。

左：非 webkit； 右：webkit

nav ul
{
    display: table;
    background: white; /* that's what you see in webkit */
}

nav ul li
{
    display: table-cell;
}

nav ul li:last-child
{
    display: block; /* "display: none;" works like I would expect */
    position: absolute;
}

这是一个小提琴。

我不确定这是否是 WebKit 中的错误，因为在表格中绝对定位元素可能不是默认行为。另一方面，display: none像我期望的那样工作。在这两种情况下，空间消耗不应该都是 0 吗？

有人知道 WebKit 中的一个错误，或者有人知道如何防止这种差距吗？

4

4 回答 4

4

将倒数第二个元素“Web & Apps”设置为显示block而不是table-cell：

nav ul li:nth-last-child(2) 
{
    display: block;
}

显示块小提琴

于 2013-03-21T14:56:44.220 回答
1

我已经将这个答案推给了其他人，并且经常得到“flexbox 尚未得到广泛支持”的回应。然而，它又来了。Webkit 行为不端的原因是在其实现中display: table，DOM 为语义声明的单元格保留空间。实现这一点的简单方法是简单地将这个元素分解成它自己的对象，就像你对徽标所做的那样。

但是...... 如果你想保持这些语义分组 - 你为什么不呢，它们都是内容，对吗？- 你总是可以使用 flexbox 模型来克服这个问题。

这是一个显示其用途的小提琴。

以下是我们更改的内容：

nav ul
{
    display: box;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: row;
    background: white; /* that's what you see in webkit */
    empty-cells: hide;
    table-layout: auto;
}

nav ul li
{
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}

现在，您的项目正确地覆盖了背景，因为它不再将最后一个li视为真正的表格单元格并且仍在表格的范围内。Flexbox 提供灵活的布局来填充可用空间。人们通常将此视为“布局的圣杯”问题的解决方案，但它的用途远不止于此。

所以，如果另一个“Flexbox 没有得到足够广泛的支持”的响应即将到来，我理解。但我会继续提出它作为我遇到的每一个问题的答案，因为支持每天都在变得更好。

于 2013-03-19T20:58:17.220 回答
0

一点 CSS 编辑，请看一下，如果这是你想要的，Fiddle

body
{
    position: relative;
    background: #bbbbbb;
    text-align: center;
    color: white;
}

header
{
    position: absolute;
    top: 10px;
    left: 630px;
    width: 80px;
    height: 60px;
    line-height: 60px;
    background: black;
    text-transform: uppercase;
}

nav
{
    position: absolute;
    top: 20px;
    left: 20px;
}

nav ul,
nav li
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul
{
    width: 200px;
}

nav ul li a
{
    display: block;
    padding: 1px;
    background: #0099ff;
    color: white;
    text-decoration: none;
}

nav ul li a:hover
{
    background: black;
}

nav li{
    margin-bottom: 5px;
    height: 25px;
    line-height:25px;
}
于 2013-03-11T13:41:46.633 回答
0

在使用绝对值时，与之相关/相关的每件事都必须是绝对像素。

我已经更新了小提琴，因为您的 nav + logo .header + .nav:last-child 不完全正确。

小提琴链接：http: //jsfiddle.net/3TUk8/2/

在其他情况下，您将不得不这样做

nav ul
{
    display: table;
    background: #bbbbbb; /* that's what you see in webkit and same as bg color will hide it :) */
    list-style: none;
}

我希望这能解决你的问题:)

于 2013-03-19T12:21:38.993 回答