html - 如何将按钮向右移动？

Question

我在这里有一个应用程序，当用户单击加号按钮时，它会显示一个模式窗口。

问题是我希望关闭按钮出现在窗口的右侧，与“以前的问题”标题在同一行。但它似乎根本没有向右移动。我究竟做错了什么？

下面是代码：

HTML：

<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>

<button type="button" id="close" onclick="return closewindow();">Close</button>
</div>

CSS：

#close{
    float:right;
    display:block;
    margin-right:0px;
    clear:left;
}

score 5 · Accepted Answer

由于 H1 是一个块元素，它占据了它所在行的所有宽度。这意味着 H1 元素后面的元素不能在同一行，即使float应用了 -property 也是如此。

您可以添加

position: absolute;
top: 0;
right: 0;

到#close元素。或者为此元素添加负边距。除此之外，还可以将 a 添加float: left;到 H1 元素。请注意，这可能会导致某些浮动和换行问题。

也可以在 H1之前#close添加 -元素。这将防止 H1 占用其行中的所有空间，但会识别具有其空间的近距离元素。

score 5 · Accepted Answer

QandATableStyle2.css您的文件中有错误。删除;后：

.previouslink{
display:none;   
};

它应该可以正常工作。;字符阻止#close加载定义。

score 0 · Accepted Answer

您可以应用display: inline;到<h1>元素，这将允许<button>（也内联）在同一行上呈现。

clear: both;请注意，如果您不希望以下内容渗入标题和按钮之间的空间，您可能需要设置以下元素的样式。

请参阅此示例。

3 回答 3