24

我正在尝试将 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>

这是我的标题 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 中加载的徽标！

谢谢！

4

5 回答 5

35

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

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

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

于 2013-10-09T05:04:00.027 回答
8

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

您需要在您的元素上设置position: relative才能#header使position: absoluteon your#right_header生效。一旦你设置了，你可以自由地定位#right_header你想要的相对位置#header

于 2013-10-09T05:10:19.367 回答
5

还有两种方法：

  1. 在要定位到其父级右侧的元素上使用边距。
.element {
  margin-right: 0px;
  margin-left: auto;
}
  1. 在父元素上使用 flexbox：
.parent {
  display: flex;
  justify-content: right;
}
于 2021-10-01T10:36:08.333 回答
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}
于 2013-10-09T05:57:36.157 回答
0

使用 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;}
于 2013-10-09T05:11:56.130 回答