Html 使用 CSS 将元素放置在右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19263524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placing an Element to the right side with CSS
提问by Frank G.
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，你可以在这里找到：
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:
这是我的标题 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!
谢谢！
回答by Josh Crozier
You can easily just floatit to the right, no need for relativeor absolutepositioning.
您可以轻松地只是float它的权利，没有必要relative或absolute定位。
.right_header {
color: #fff;
float: right;
}
Updated jsFiddle- might need to add some padding/margins- like this.
更新 jsFiddle- 可能需要添加一些padding/margins-像这样。
回答by Will Piers
As JoshC mentioned, using floatis one option. I think your situation suggests another solution, though.
正如 JoshC 提到的，使用float是一种选择。不过，我认为您的情况提出了另一种解决方案。
You need to set position: relativeon your #headerelement in order for the position: absoluteon your #right_headerto take effect. once you set that, you are free to position #right_headerhowever you want relative to #header
您需要position: relative在您的#header元素上进行设置才能使position: absolute您的#right_header生效。一旦你设置了它，你就可以自由地#right_header相对于你想要的位置#header
回答by Dinesh Kanivu
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}
回答by contehhh
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;}
