html - 如何将元素定位到右侧？

Question

我正在尝试将一个 css 元素放置在页眉的右侧，但不确定具体如何操作。我尝试使用:

 position: Absolute; top: 20px; right 0px; 

这可行，但如果您调整浏览器，文本会随之移动。

我创建了一个 JFiddle，您可以在这里找到它:

http://jsfiddle.net/rKWXQ/

这样你就可以看到我正在尝试做什么。我在包装的 div 元素中有一个文本，上面写着 Call Now (555) 555-5555。

这是 header 元素，其中有一个 right_header 元素。

    <div id="header">
        <span class="right_header">Call Now (555) 555-5555</span>
    </div>

这是我的标题 CSS:

   /* Header */
   #header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
  .right_header{color: #fff; position: absolute; top: 70px; right: 0px}

有人可以告诉我完成此操作的正确方法吗？

请注意，左侧将有一个不会在 JFiddle 中加载的 Logo !

谢谢!

Answer 1

您可以轻松地将其 float 到右侧，无需相对或绝对定位。

.right_header {
    color: #fff;
    float: right;
}

Updated jsFiddle - 可能需要添加一些 padding/margins - like this .