使用CSS将元素放置在右侧

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

还有两种方法可以做到这一点：

1. 在要定位到其父级右侧的元素上使用边距。

.element {
  margin-right: 0px;
  margin-left: auto;
}

2. 在父元素上使用 flexbox：

.parent {
  display: flex;
  justify-content: right;
}

Answer 2

您可以轻松地float向右,不需要relative或absolute定位.

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

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

Answer 3

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

你需要设置position: relative你的#header才能要素对position: absolute你的#right_header才能生效。一旦您设置，你可以自由的位置#right_header，但是你想相对于#header

Answer 4

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

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