css - 如何将一个元素居中定位，另一个浮动在同一行上

Question

在页面的最底部，我有这个标记：

<footer class="general">
    <span class="fr">&copy; Copyright 2013</span>
    <h3>Stuff written here</h3>
</footer>

“fr”类使元素向右浮动。我真正想要实现的是将标题和跨度放在同一条线上，但我希望跨度向右浮动，并且标题相对于整个宽度居中，而不是在左边缘和跨度之间（这是我目前的情况）。

具体CSS代码：

.general
{
    margin: 5px 0;
    text-align: center;
    text-transform: uppercase;
}

.fr
{
    float: right;
}

Answer 1

添加一些样式怎么样h3？

这对我有用：

.general
{
    margin: 5px 0;
    text-align: center;
    text-transform: uppercase;
}
.general h3
{
    width:250px;
    margin: 5px auto;
}
.fr
{
    float: right;
}

Answer 2

尝试使用这个 CSS：

.general {
    position:relative;
}
.fr {
    position:absolute;
    right:0;
}
.general h3 {
    text-align:center;
    margin:0;
}

jsFiddle 示例

通过将.fr类从更改float:right为position:absolute; right:0您将其从文档流中删除，以便 h3 元素可以居中而不受跨度的影响。