html - 用大小均匀的按钮填充两个大小均匀的列

Question

我正在设计一个菜单。此菜单应包含按两列排列的按钮。每个按钮的宽度应为可用屏幕宽度的 50%。

我已经设法使每个按钮的大小相同。但我希望每个按钮都是屏幕宽度的 50%，无论按钮包含多少字符。此外，我需要使用相对尺寸，因为我必须支持不同的屏幕分辨率。

这是我到目前为止得到的：http: //jsfiddle.net/PJ9cJ/

<div class="actions" id="actions">
        <div id="steuerung">
            <table class="actions_table" border="0" >
                <tr >
                    <td>
                            <a href="javascript:displaySomething();" class="action_button" >Button 1</a>
                    </td>
                    <td >
                            <a href="javascript:displaySomething();" class="action_button" >Button 2</a>
                    </td>
                </tr>
                <tr >
                    <td >
                            <a href="javascript:displaySomething();" class="action_button"  >Button 3</a>
                    </td>
                    <td >
                            <a href="javascript:displaySomething();" class="action_button" >Button 4</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

在这里你可以看到我的问题： 感谢任何帮助！谢谢！

Answer 1

我将表格设为其所在元素的 100% 宽度，并将其父 div（动作）向左浮动并设为 100%。然后我对 action_button 类的边距做了一些调整。

.actions_table{
    width:100%;
    border-spacing:0;
}
#actions{
    width:100%;
    float:left;
}

.action_button {
    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',       endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:50%;
    font-weight:bold;
    width: 100%;
    margin: 5%;
    margin-left:0;
    margin-right:0;
    padding:1em 0px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}

http://jsfiddle.net/PJ9cJ/11/

Answer 2

我不明白您遇到的实际问题是什么？但我想让你说，如果你将<td>元素对齐到与列相同的大小。最好是用于<td>元素，display: inline-block;在此之后定义你可以调整display: block;到其他元素。或者如果这不起作用，请给我一张你想要的图片（只有你的专栏图片）。