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

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

这样，这里是我提出的代码：

<div ID="menubar">    <div ID="menu">        <div >            <button>button 1</button>        </div>        <div >            <button>button 2</button>        </div>        <div >            <button>button 3</button>        </div>        <div >            <button>button 4</button>        </div>    </div></div>

和我的CSS：

#menubar {    wIDth: 100%;    height: 100%;    display: @R_404_5991@;    @R_404_5991@-layout: fixed;}#menu {    display: @R_404_5991@-row;}#menu .button {    position: relative;    display: @R_404_5991@-cell;}#menu .button button {    position: absolute;    right: 0px;    bottom: 0px;    top: 0px;    left: 0px;}

这在Mozilla以外的每个浏览器中都是完美的。 Mozilla似乎并不尊重按钮类的相对位置，因此按钮所有的位置绝对是彼此之间的顶点(而不是绝对在div中，类“button”)。

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

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

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

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

例如，

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

这是WORKING DEMO

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

例如，

#menubar {    wIDth: 100%;    height: 100%;    display: @R_404_5991@;    @R_404_5991@-layout: fixed;}#menu {    display: @R_404_5991@-row;}#menu .button {    display: @R_404_5991@-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:@R_404_5991@-cell;    wIDth: 100%;    height:100%;}

这是WORKING DEMO – 4

总结

以上是内存溢出为你收集整理的html – 位置相对不能使用显示表格单元格？全部内容，希望文章能够帮你解决html – 位置相对不能使用显示表格单元格？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。