Question

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

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

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

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

http://jsfiddle.net/rKWXQ/

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

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

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

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

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

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

谢谢！

Answer 1

您可以轻松地float向右移动，无需relative或absolute定位。

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

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

Answer 2

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

您需要在position: relative元素上设置#header，以使position: absolute上的#right_header生效。设置完成后，您可以根据#right_header

自由定位#header

Answer 3

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

 #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}

Answer 4

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

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

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

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

将其更改为...

#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;}

使用CSS将元素放置在右侧

4 个答案: