使用CSS将元素放置在右侧 [英] Placing an Element to the right side with CSS

问题描述

我试图将css元素放置在标题的右侧，但不确定如何执行.我尝试使用:

I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:

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

那可以，但是如果您调整浏览器，文本将随之移动.

That would work but if you adjust the browser the text moves with it.

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

I created a JFiddle that you can find here:

http://jsfiddle.net/rKWXQ/

这样，您可以看到我正在尝试做的事情.我在包裹的div元素中有一条文本，显示立即致电(555)555-5555".

This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now [phone].

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

Here is the header element and inside of that I have a right_header element.

    <div id="header">
        <span class="right_header">Call Now [phone]</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}

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

Can someone please tell me the proper way to accomplish this please?

请注意，左侧将有一个徽标，该徽标将不会加载到JFiddle中！

Note the left side will have a logo there that will not load in JFiddle!

谢谢！

推荐答案

您可以轻松地将其 float 移至右侧，而无需 relative 或 absolute定位.

You can easily just float it to the right, no need for relative or absolute positioning.

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

更新的jsFiddle -可能需要添加一些 padding / margins - 像这样 .

这篇关于使用CSS将元素放置在右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！