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

我正在设计一个菜单。该菜单应包含按两列排列的按钮。每个按钮的宽度应该是可用屏幕宽度的50％。用均匀大小的按钮填充两个均匀大小的列

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

<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>

而且在这里你可以看到我的问题： enter image description here 我明白任何帮助！谢谢！

来源

2013-03-11 Markus

有没有试过你的链接显示块和50％的宽度？ – 2013-03-11 14:14:29

我们在谈论哪些按钮？标有button1 - 4的标签？另外，你可以发布一些CSS，以便我们看到你到目前为止的样式。听起来像什么Sven Bieder说会是我第一个编码，但你还没有提到你迄今为止尝试过的任何方法。 – Eric 2013-03-11 14:56:22

我们（根据我的html）谈论按钮1-4。相应的CSS位于jsfiddle链接中。我在''和''上都用'display：block'玩过，但是没有产生预期的效果。 – Markus 2013-03-11 16:33:44

我将表格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/

来源

2013-03-12 01:56:25 npage

我真的爱你！谢谢！ – Markus 2013-03-12 16:01:23

我din't明白你患了什么实际问题？但是我想让你说，如果你将<td>元素与列一致对齐。最好是使用<td>元素，在此之后定义display: inline-block;您可以将display: block;调整为其他元素。或者如果这不起作用，请告诉我一张照片究竟是你想要的（只有你的专栏图片）。

来源

2013-03-12 02:21:33

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

回答

相关问题