用均勻大小的按鈕填充兩個均勻大小的列

我正在設計一個菜單。該菜單應包含按兩列排列的按鈕。每個按鈕的寬度應該是可用屏幕寬度的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

用均勻大小的按鈕填充兩個均勻大小的列

回答

相關問題