21

我创建了一个由按钮组成的水平菜单。我需要这些按钮调整宽度，以便它们一起占据菜单容器宽度的 100%。它的行为方式应该与 TD 在 TABLE 中的行为方式相同。

因此，这是我想出的代码：

<div id="menubar">
    <div id="menu">
        <div class="button">
            <Button>Button 1</Button>
        </div>
        <div class="button">
            <Button>Button 2</Button>
        </div>
        <div class="button">
            <Button>Button 3</Button>
        </div>
        <div class="button">
            <Button>Button 4</Button>
        </div>
    </div>
</div>

和我的 CSS：

#menubar {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}

#menu {
    display: table-row;
}

#menu .button {
    position: relative;
    display: table-cell;
}

#menu .button Button {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
}

这在除 Mozilla 之外的所有浏览器中都能完美运行。Mozilla 似乎不尊重按钮类的相对位置，因此，所有按钮都绝对位于彼此顶部之一（而不是绝对位于具有“按钮”类的 DIV 内）。

经过一些进一步的研究，当显示设置为“表格单元格”时，这似乎是 Mozilla 的一个已知问题，而不是各自的“相对”位置。

有谁知道解决方法来实现我想要做的事情？

注意：菜单是动态的，所以我不知道会有多少按钮，所以我无法为每个按钮提供百分比宽度。

4

2 回答 2

33

使用位置：表格单元格中的相对未定义

W3.org 的 CSS 规范说，position: relative对于 table-cell 和其他表格元素，效果是未定义的。

有关详细信息，请参阅：http ://www.w3.org/TR/CSS21/visuren.html#choose-position。

因此，一些浏览器似乎允许表格单元格的行为类似于表格单元格中任何绝对定位的子元素的包含块（请参阅http://www.w3.org/TR/CSS21/visuren.html#comp-abspos更多细节）。position: relative但是，某些浏览器在应用于表格单元格时不会尝试扩展规范并忽略。

您会看到兼容浏览器的正常行为，但对于 CSS 规范未定义的行为，浏览器可以随意做或不做他们喜欢的事情，因此结果会有所不同。

如何解决这个问题

对于这些情况，我会在具有绝对定位的单元格中放置一个块级包装器元素（我设置偏移量以便包装器填充表格单元格），然后相对于包装器绝对定位我的内部子元素。

使按钮在宽度和高度上都缩放

下面的 CSS 将允许按钮元素填充表格单元格的宽度和高度：

body, html {
    height: 100%; /* if you want a to fil up the page height */
}
#menubar {
    width: 100%;
    height: 100%; /*or else fix this height... 100px for example */
    display: table;
    table-layout: fixed;
}
#menu {
    display: table-row;
}
#menu .button {
    display: table-cell;
    border: 1px dotted blue;
    height: 100%; /* scale the height with respect to the table */
}
#menu .button Button {
    width: 100%;
    height: 100%; /* scale the height with respect to the table cell */
}

您需要为 设置高度，#menubar然后确保表格单元格和按钮都具有height: 100%（想想继承链，表格到表格单元格，然后表格单元格到按钮）。

小提琴：http: //jsfiddle.net/audetwebdesign/7b9h9/

于 2013-07-08T12:49:45.063 回答
7

从#menu .button Button

例如，

#menu .button Button {
    position: absolute;
    /*right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;*/
}

这是工作演示

如果你想要纯display:table-cell;解决方案，你只需要删除positioning

例如，

#menubar {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}
#menu {
    display: table-row;
}
#menu .button {

    display: table-cell;
}
#menu .button Button {

    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
}

这是工作演示 - 2

编辑

要拉伸按钮以占据宽度，这是解决方案。

编码：

#menu .button Button {
    width: 100%;
}

这是工作演示 - 3

编辑 - 2

根据 OP 的要求，暗示要为按钮添加高度，这里是相同的解决方案。添加height:100%;是 OP 对这个解决方案的贡献。

#menu .button Button {
    display:table-cell;
    width: 100%;
    height:100%;
}

这是工作演示 - 4

于 2013-07-08T12:17:47.060 回答