Question

我有一个粘性的页脚栏，感谢cssstickyfooter的人提供免责声明。我想在右侧放置一个像facebook一样的按钮...所以我创建了一个带有以下代码的表格。

#footer {
    position: relative;
    margin-top: -60px;
    height: 60px;
    clear:both;
    background-color: #000;
    text-align: center;
    color: #999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

和html为

<div id="footer">
<table width="100%">
<tr>
    <td width="85%">
        <p>© 2011 somecompany<br />
        Image © 2011 by somebig company</p>
    </td>
    <td width="15%">
        <p>like goes here</p>
    </td>
</tr>
</table>
</div>

这（显然）对齐文本，但它将它与它所在的单元格对齐。无论如何将免责声明文本与整个页面的中心对齐并保持相似的按钮在右边？

我已经考虑过将这样的按钮放在自己的桌子上并让它漂浮在那里......但我不确定。

Theres是http://jsfiddle.net/Gnznn/

的一个例子

谢谢！

标记为家庭作业所以我可以得到解释

Answer 1

我觉得有一种更简洁的方法可以做到这一点，但这至少有效，不使用table进行布局。注意，我将样式放在属性中，这样你就可以更容易地看到我做的事情了，但是你应该把它放在相关类的声明中。

<div id="footer">
    <div style="width: 15%; height: 1px; float: left;"></div>
    <div style="width: 70%; float: left;">
        <p>© 2011 somecompany<br />Image © 2011 by somebig company</p>
    </div>
    <div style="width: 15%; float: right;">
        <p>like goes here</p>
    </div>
</div>

http://jsfiddle.net/Gnznn/3/

*换句话说，将position: relative或position: absolute与right: 0和z-index: 5000（或其他）一起使用。

中心文本到页面而不是单元格

1 个答案: