0

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

对于 Mozilla，我想将左侧的标题和右侧的日期保持在同一行。

在 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;
}
4

4 回答 4

2

你应该这样尝试。

 <td align='right'>date<td>
于 2013-08-06T17:19:00.923 回答
2

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

字体标签也被弃用了。

我写了一个使用 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>

你可以在这里看到结果。

于 2013-08-06T17:45:06.200 回答
0

将一个名为 .right 的类添加到您的 css 中，并将 text-align 设置为 right，顺便说一下，您应该放弃字体标签并通过 css 执行此操作

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

<table>
 <tr>
  <td class="right">stuff that I want right aligned</td>
 </tr>
</table>
于 2013-08-06T17:40:51.517 回答
0

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

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

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

于 2013-08-06T17:44:40.867 回答