如何使“标题”文本在HTML表格中左右对齐

Question

I have a page which renders correctly in IE and Chrome, but not in Firefox. 我有一个页面可以在IE和Chrome中正确显示，但不能在Firefox中显示。 The result I want in all three browsers looks like this: 我想要在所有三种浏览器中显示的结果如下所示：

...but in Firefox, it looks like this: ...但是在Firefox中，它看起来像这样：

The code I have so far is this: 到目前为止，我的代码是：

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

What am I doing wrong, and what do I need to do to fix the Firefox problem, without "breaking" the current behaviour in IE and Chrome ("right-aligned" text maintains its relationship with the right edge of the table as the browser window is resized)? 我在做什么错了，我该怎么做才能解决Firefox问题，而又不会“破坏” IE和Chrome中的当前行为（“右对齐”文本在浏览器中与表的右边缘保持关系）窗口是否已调整大小）？

Answer 1

This is a side-effect of misusing floats. 这是滥用浮子的副作用。 The best solution is to use display:inline-block instead. 最好的解决方案是改用display:inline-block 。

( jsBin ) （ 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

some browsers don't support some CSS3 stuff. 有些浏览器不支持CSS3。 -moz- usually does the trick. -moz-通常可以解决问题。 lets say firefox doesn't support a margin-right in CSS. 可以说firefox在CSS中不支持margin-right。 You can say -moz-margin-right: 40px; 你可以说-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