Question

当用户点击加号按钮时，我有一个应用程序here，它会显示一个模态窗口。

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

以下是代码：

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

Answer 1

由于H1是一个块元素，它占据了它所代表的线的所有宽度。这意味着H1元素后面的元素不能在同一行上，即使应用了float - 属性。

您可以添加

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

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

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

Answer 2

QandATableStyle2.css文件中存在错误。在以下后删除;：

.previouslink{
display:none;   
};

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

Answer 3

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

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