Html 如何向右移动按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10710716/
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
How to move a button to the right?
提问by user1394925
I have an application herewheree when user clicks on the plus button, it displays a modal window.
我在这里有一个应用程序，当用户单击加号按钮时，它会显示一个模式窗口。
Problem is that I want the close button to appear on the right hand side of the window, on the same line as the "PREVIOUS QUESTIONS" heading. But it doesn't seem to be moving to the right at all. What am I doing wrong?
问题是我希望关闭按钮出现在窗口的右侧，与“PREVIOUS QUESTIONS”标题在同一行。但它似乎根本没有向右移动。我究竟做错了什么？
Below is the code:
下面是代码：
HTML:
HTML：
<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>
<button type="button" id="close" onclick="return closewindow();">Close</button>
</div>
CSS:
CSS：
#close{
float:right;
display:block;
margin-right:0px;
clear:left;
}
回答by drublic
As H1 is a block-element it takes all the width of the line on which it stands.
This means that the elements that follow the H1-element cannot be on the same line, even if a float-property is applied to it.
由于 H1 是一个块元素，它占用了它所在行的所有宽度。这意味着 H1 元素后面的元素不能在同一行上，即使对其float应用了- 属性。
You could either add
你可以添加
position: absolute;
top: 0;
right: 0;
to the #closeelement. Or add a negative margin for this element. Apart from that it's also possible to add a float: left;to the H1-element. Please be aware that this might cause certain problems with floating and line-breaks.
到#close元素。或者为此元素添加负边距。除此之外，还可以将 a 添加float: left;到 H1 元素。请注意，这可能会导致浮动和换行符出现某些问题。
It is also possible to add the #close-element beforethe H1. This will prevent the H1 from taking up all space in it's line, but will recognize the close-element with its space.
也可以在 H1之前添加 -#close元素。这将防止 H1 占用其行中的所有空间，但会识别具有其空间的关闭元素。
回答by WojtekT
There is an error in your QandATableStyle2.cssfile.
Remove ;after:
您的QandATableStyle2.css文件中有错误。删除;后：
.previouslink{
display:none;
};
And it should work fine. ;character prevents #closedefinition from loading.
它应该可以正常工作。;字符阻止#close加载定义。
回答by cdhowie
You could apply display: inline;to the <h1>element, which would allow the <button>(also inline) to be rendered on the same line.
您可以应用display: inline;到<h1>元素，这将允许<button>（也是内联的）在同一行上呈现。
Note that you will likely need to style the following element to clear: both;if you don't want the following content bleeding into the space between the header and the button.
请注意，clear: both;如果您不希望以下内容渗入标题和按钮之间的空间，您可能需要将以下元素设置为样式。
See this example.
请参阅此示例。
