html – 位置相对不能使用显示表格单元格？

发布时间：2020-12-14 21:30:57 所属栏目：资源来源：网络整理

导读：我创建了一个由按钮组成的水平菜单。我需要这些按钮来调整宽度，以便它们占据菜单容器宽度的100％。它应该与TD在TABLE中相同。这样，这里是我提出的代码： div id="menubar" div id="menu" div class="button" ButtonButton 1/Button /div div class="butto

我创建了一个由按钮组成的水平菜单。我需要这些按钮来调整宽度，以便它们占据菜单容器宽度的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中，类“button”)。

经过一些进一步的研究，似乎这是Mozilla的一个已知问题，当显示设置为“table-cell”时，不是相应的位置“相对”。

有没有人知道一个工作来实现我要做的事情？

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

解决方法

从#menu .button按钮中删除右，下，上，左定位

例如，

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

这是WORKING DEMO

如果你想要纯显示：table-cell;解决方案，你只需要去除定位

例如，

#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;
}

这是WORKING DEMO – 2

编辑

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

代码：

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

这是WORKING DEMO – 3

编辑 – 2

根据OP的要求，暗示为按钮添加高度的条款，这里是相同的解决方案。加高度：100％; OP是该解决方案的贡献。

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

这是WORKING DEMO – 4

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!