使用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:

我试图将一个css元素放在标题的右侧，但不确定如何做到这一点。我试过用：

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

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

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

I created a JFiddle that you can find here:

我创建了一个JFiddle，你可以在这里找到：

http://jsfiddle.net/rKWXQ/

This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.

这样你就可以看到我想要做的事情。我在一个包装的div元素中有一个文本，其中显示Call Now（555）555-5555。

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

这是标题元素，在其中我有一个right_header元素。

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

Here is my Header CSS:

这是我的Header 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?

请有人请告诉我正确的方法吗？

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

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

Thanks!

谢谢！

4 个解决方案

#1

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

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

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

Updated jsFiddle - might need to add some padding/margins - like this.

更新了jsFiddle - 可能需要添加一些填充/边距 - 像这样。

#2

As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.

正如JoshC所说，使用float是一种选择。我认为你的情况提出了另一个解决方案。

You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header

您需要在#header元素上设置position：relative，以使#right_header上的position：absolute生效。一旦你设置了它，你可以*地定位#right_header但是你想要相对于#header

#3

You can do this way also if you want to do with position, Try this please

你也可以这样做，如果你想做位置，请试试这个

 #header {margin: auto; position:relative; 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: 0px; right: 0px}

#4

The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.

使用来自JoshC的浮点数的答案可以正常工作，但是，我认为这是有原因的。

The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.

你的代码不起作用的原因是绝对位置是相对于维度为0x0的。

The '' should be absolutely position in order for this code to work.

''应该是绝对的位置，以便此代码可以工作。

#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}

change it to...

把它改成......

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

#1