如何将元素定位到右侧？

Question

我正在尝试将一个CSS元素放置在页眉的右侧，但不确定该如何实现。我尝试使用：

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

这个办法可以，但如果你调整浏览器，文本会跟着移动。

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

http://jsfiddle.net/rKWXQ/

这样你就可以看到我试图做什么。我有一个包裹在 div 元素内的文本，上面写着现在打电话 [phone]。

这是头部元素，里面有一个右侧标题元素。

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

请问有人能告诉我正确的方法来完成这件事吗？

请注意，在JFiddle中将显示左侧有一个标志，但该标志无法加载！

谢谢！

- Frank G.

Answer 1

您可以轻松地将其float到右边，无需使用relative或absolute定位。

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

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

- Josh Crozier

---

做到了！！！噢，为什么我没想到呢，哈哈哈，对不起，我应该懂的！现在我很失望，一直在努力学习这个东西，结果还是错过了。谢谢！ - Frank G.

抢我一步，+1 :P 更多阅读：当在未浮动的容器中浮动内容时，这将会很有用：http://www.webtoolkit.info/css-clearfix.html - francisco.preller

@francisco.preller 是的，那可能会有所帮助。或者，将 overflow:hidden 应用于父元素，基本上与清除浮动效果相同 - 强制它包含其子元素。 - Josh Crozier

不知道overflow:hidden，谢谢提醒。似乎有一些注意事项：https://dev59.com/6W035IYBdhLWcg3wMNCW - francisco.preller

@francisco.preller 那个链接很有用！谢谢你！！ - Frank G.

Answer 2

还有两种方法可以实现：

1. 在要放置在父元素右侧的元素上使用边距。

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

2. 在父元素上使用弹性布局：

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

- Flip

Answer 3

正如JoshC所提到的，使用float是一种选择。但我认为你的情况建议采用另一种解决方案。

你需要在#header元素上设置position: relative，以便在#right_header上设置position: absolute生效。一旦你设置好了，你就可以根据需要自由定位#right_header相对于#header

- Will Piers

---

谢谢你，那真的很有帮助！但浮点数也可以实现。使用浮点数和位置之间有什么区别？或者说，使用位置比使用浮点数更好吗？ - Frank G.

@FrankG. 我通常避免使用绝对定位，正如你所提到的原因一样，但浮动也有其缺点。值得一提的是，绝对定位的元素会脱离正常流程。 - Josh Crozier

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}

- Dinesh Kanivu

---

@Frank G. 请查看这个CSS。 - Dinesh Kanivu

Answer 5

使用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;}

- contehhh

Answer 6

<div><button>继续</button></div> 将按钮放在 div 右侧

<style>
button {
 display:block;
 margin-left:auto;
}
</style>

- Aya Ramzy Abed