如何使“標題”文本在HTML表格中左右對齊

Question

我有一個頁面可以在IE和Chrome中正確顯示，但不能在Firefox中顯示。 我想要在所有三種瀏覽器中顯示的結果如下所示：

...但是在Firefox中，它看起來像這樣：

到目前為止，我的代碼是：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>My title</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        margin-left:50px;
        margin-right:50px;
      }
      .title{
        float:left;
        font-size:x-large;
      }
      .right-aligned{ 
        float:right;
        font-size:smaller;
        text-align:right;
      }
      table,tr,td,th {
        border:1px solid black;
      }
      tr.clsTable {
        background-color:lightgray;
      }
      td.tableContainer {
        padding:0px;
      }
      table {
        border-collapse: collapse;
      }
      td.spacer {
        border-right:hidden;
      }
      table.clsSubTable {
        border-top:0px hidden;
        border-right:0px hidden;
      }
      td,th {
        padding:3px;
      }
      th {
        background-color:burlywood
      }
      .no-result{
        position:absolute;
        top:50px;
      }
    </style>
  </head>
  <body>
    <div class="title">My title</div>
    <div class="right-aligned">Right<br/>aligned</div>
    <br/>
    <div>
      <table class="clsTable" width="100%">
        <tr>
          <th>Some heading</th>
          <th>Some other heading</th>
        </tr>
        <tr class="clsTable">
          <td>Some data</td>
          <td>Some other data</td>
        </tr>
      </table>
    </div>
  </body>
</html>

我在做什么錯了，我該怎么做才能解決Firefox問題，而又不會“破壞” IE和Chrome中的當前行為（“右對齊”文本在瀏覽器中與表的右邊緣保持關系）窗口是否已調整大小）？

Answer 1

這是濫用浮子的副作用。 最好的解決方案是改用display:inline-block 。

（ jsBin ）

 .wrp { font-size: 0; /* Prevent white-space between tags being rendered as text */ } .title, .right-aligned { display: inline-block; } .title { width: 75%; font-size:x-large; } .right-aligned { width: 25%; font-size: 10pt; text-align:right; } body { font-family: Arial, Helvetica, sans-serif; margin-left:50px; margin-right:50px; } table,tr,td,th { border:1px solid black; } tr.clsTable { background-color:lightgray; } td.tableContainer { padding:0px; } table { border-collapse: collapse; } td.spacer { border-right:hidden; } table.clsSubTable { border-top:0px hidden; border-right:0px hidden; } td,th { padding:3px; } th { background-color:burlywood }

 <div class="wrp"> <div class="title">My title</div> <div class="right-aligned">Right<br/>aligned</div> </div> <div><table class="clsTable" width="100%"><tr><th>Some heading</th><th>Some other heading</th></tr><tr class="clsTable"><td>Some data</td><td>Some other data</td></tr></table></div>

Answer 2

有些瀏覽器不支持CSS3。 -moz-通常可以解決問題。 可以說firefox在CSS中不支持margin-right。 你可以說-moz-margin-right：40px;

如何使“標題”文本在HTML表格中左右對齊

問題描述

2 個解決方案

解決方案1
1

解決方案2
0 2015-08-08 00:25:38

如何使“標題”文本在HTML表格中左右對齊

問題描述

2 個解決方案

解決方案1 1

解決方案2 0 2015-08-08 00:25:38

解決方案1
1

解決方案2
0 2015-08-08 00:25:38