HTML：跨越時的統一單元尺寸

我需要一些幫助，以便使用我的HTML佈局。我想製作一個簡單的計算器數字鍵盤。我希望我的「=」按鈕更大，所以我用rowspan將它拉伸成兩行。但是，（在Chrome中）這似乎使我的前兩行比前兩行更大。我曾嘗試設置我的單元格填充/間距爲零，但我得到了相同的效果。HTML：跨越時的統一單元尺寸

更新： 既然沒有人回答了可是...

我一直在讀，它看起來像有不使用table S表示佈局的目的達成共識。那麼，你應該用什麼是？我發現大量的材料解釋了爲什麼表格非常糟糕，但很少介紹如何在沒有它們的情況下製作表格/網格佈局。用table以外的東西做這個會更好嗎？

/更新

下面是HTML（我打算以後應用CSS）：

<html> 
    <div> 
     <table width="200" height="300" border="0" style="table-layout:fixed"> 
      <tr> 
      <td colspan="4"><input type="text" style="width:100%; text-align:right" value="0" readonly /></td> 
      </tr> 

      <tr> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="7" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="8" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="9" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="-" /></td> 
      </tr> 

      <tr> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="4" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="5" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="6" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="+" /></td> 
      </tr> 

      <tr> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="1" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="2" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="3" /></td> 
      <td colspan="1" rowspan="2"><input type="button" style="width:100%;height:100%" value="=" /></td> 
      </tr> 

      <tr> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="+/-" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="0" /></td> 
      <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="." /></td> 
      <!-- ROWSPAN --> 
      </tr> 

     </table> 
    </div> 
</html>

的按鈕大小看起來罰款Firefox瀏覽器。順便說一句：有誰知道爲什麼IE9將按鈕扭曲成奇怪的尺寸？

謝謝。

這裏是一個圖像，看到底部兩行稍大：

enter image description here

來源

2014-01-31 Eric

只是響應您的表談話......建議使用塊容器，如div;或部分，文章，旁邊等佈局。至少在我教過的內容中，你應該只保留表格數據的表格。我認爲這樣的計算器很好。 – ncf

的方法是太複雜了。最好設置input元素（按鈕）的大小，並讓瀏覽器相應地分配單元格的大小。以下樣式表說明了一種更簡單的方法。它看起來有點複雜，因爲它必須覆蓋現在HTML屬性中的一些設置。通常最好在外部樣式表或至少在style元素中一致地進行樣式設計。如果你簡化了標記，你也可以減少樣式表。

table, td { height: auto !important; width: auto !important; } 
td { width: 2em; height: 2em; padding: 0;} 
input { padding: 0; font-size: 100%; 
     width: 2em !important; height: 2em !important; } 
td[rowspan="2"] input { height: 4em !important; } 
td[colspan="4"] input { width: 8em !important; }

來源

2014-01-31 07:09:27

HTML：跨越時的統一單元尺寸

回答

相關問題