Question

使用td将日期对齐float:right;框中的最右侧它适用于chrome但不适用于mozilla firefox ....如何在下图中将Date对齐到极右？ Date＆amp;的位置<hr/>的大小随着内容的长度而变化。

我希望将标题保持在左侧，而将日期保持在同一行的mozilla中。

aligning in mozilla

使用的代码：

<table id='cs'>
<tr>
<td>
<font size='4' id='heading'><b><U>heading</U></b></font>
<font size='2' style='float:right;'><i><b >Date: </b>date</i></font><br/>
Test Content<br/><hr/>
Signature<br/>
</td></tr></table>

id cs具有以下规则：

#cs{
    border: 2px solid black;
    padding: 4px 17px;
    width: 100%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 10px;
    display: inline-block;
    background: #f0f4fc;
}

ID标题有以下规则：

#heading
{
    text-transform:capitalize;
}

Answer 1

正如Skovy在评论中提到的那样，尽量避免像你那样在html标签中使用你的样式。

不推荐使用font-tag。

我写了一个使用CSS解决您问题的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #cs {
                border: 2px solid black;
                padding: 4px 17px;
                width: 100%;
                float:right;
                margin-right: 20px;
                margin-bottom: 10px;
                background: #f0f4fc;
            }
            .post-content {
                <!-- style your content here -->
            }
            .post-header {
                float: left;
                font-weight: bold;
            }
            .post-date {
                float: right;
                font-size: 0.7em;
            }
            .post-date .label {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <table id="cs">
            <tr>
                <td>
                    <div class="post-header">
                        Test post
                    </div>
                    <div class="post-date">
                        <span class="label">Date: </span>12.12.1212
                    </div>
                    <div style="clear:both"/>
                    <div class="post-content">
                        My Content
                    </div>
                </td>
            </tr>
        <table>
    </body>
</html>

您可以看到结果here。

Answer 2

你应该这样试试。

 <td align='right'>date<td>

Answer 3

将一个名为.right的类添加到你的css中，文本对齐设置为右边，顺便说一下你应该抛弃字体标签并通过css

<style type="text/css">
 .right { text-align: right; }
</style>

<table>
 <tr>
  <td class="right">stuff that I want right aligned</td>
 </tr>
</table>

Answer 4

由于您的内容出于某种原因在表格中，将日期放在另一个表格列中并通过CSS类将其与该列中的右侧对齐是不合理的？

<table id='cs'>
  <tr>
    <td>
        <h2 class='heading'>".$heading."</h2>
    </td>
    <td>
        <span class='date'><strong>Date: </strong>".$date."</span>
    </td>
  </tr>
</table>

您可以将类浮动到右侧，或将文本右侧对齐。

在td标记中将文本对齐到右边

4 个答案: