logo标签列表

在IE 7中，我如何使一个包含在表格单元格内的div实现右对齐？

htmlcssinternet-explorer-7alignmentcss-float
4
在表格单元格内部指定div的Float:right在IE中似乎没有效果。我也尝试了其他方法，比如text-align right来将层内容对齐到右侧，在IE 7中也没有成功。
CSS代码片段：
.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}

HTML 片段：

<td class="workloadcell">
    <div class="workload">
        1
    </div>
</td>

HTML和CSS都已验证，在Firefox中，文本按右对齐显示，这是应该的。如果您想通过复制/粘贴来测试完整的代码，请使用此处提供的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
        <title>Table Test</title>
        <style type="text/css">
td {
    border: 1px solid black;
}


.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}



div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}
</style>
    </head>



<body>
        <table>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td colspan="4">
                    <div>
                        2008
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <div>
                        Q1
                    </div>
                </td>
                <td>
                    <div>
                        Q2
                    </div>
                </td>
                <td>
                    <div>
                        Q3
                    </div>
                </td>
                <td>
                    <div>
                        Q4
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    workload forecast
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        1
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    actual workload
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                        </tr>
        </table>
    </body>
</html>

(我知道CSS不是最优的，因为类声明在几个元素中重复了，但如果这与问题无关，请不要评论。)

3个回答
5
它应该按照你的方式工作（或者像alexmeia建议的那样）。但是，由于这是IE，标题Q1、Q2等会使表格列比你请求的14像素更宽。列在你定义的14像素内右对齐，但是div在IE中不会向右移动。（即使列实际上比14像素宽，div仍保持在为其定义的14像素内）为了说明这一点，你可以将宽度设置为28像素，或者更改一个背景颜色以展示td和其中的div之间的差异。
.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6EEE9;
    text-align: right;
    width: 14px;
    float: right;
}

IE的解决方案是要么不定义宽度，要么将其宽度调整到足够容纳头部。
1
非常感谢您的帮助。在今天面临截止日期时，帮助我追踪到了一个错误。 - John Rose
3
你不需要为div.workload声明规则。 只需使用以下规则，一切都将正常工作：
 td {
    border: 1px solid black;
     }

 .workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 20px;
    height: 16px;
    text-align: right;
    }
谢谢，它有效。然而，它似乎有效是因为将宽度从14px增加到20px。我已经为表格单元格指定了0px的填充，所以人们可能认为即使是14px宽的单元格也应该有足够的空间进行右对齐。这是有什么解释吗？ - simon
1
值得注意的是，IE（尤其是预 SP1 XP上的v6和旧版Windows）在将表格与div混合使用以及将div嵌套在这些表格中时存在严重的渲染问题。一旦您超过一定的复杂度和嵌套，可能会出现空白/白屏。
如果您需要右对齐某些单元格中的文本内容，则建议向td标签添加额外的类声明，而不是嵌套一个div。我还建议尝试在IE8中查看问题是否仍然存在。您没有提到需要支持哪些版本。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接