html - 当 on 存在于 的上下文之外时，如何对齐这两个按钮？

Question

我有一个 <form />带有文本框和 <input />按钮。

可以在这里看到一个例子:http://jsfiddle.net/94sJa/

我想在第一个按钮的右侧添加另一个按钮，但在表单上下文之外。它的唯一目的是重新加载页面，因此它不需要在表单中。另外，我不想在用户单击“重置”时提交搜索查询，就像他们单击“搜索”时那样。

有没有简单的方法让我对齐这两个按钮？

为此，HTML 和 CSS 也在这里:

<div class="layout-fund-search-groupfactsheet">

    <form method="get" action="/uk/groupfactsheet/schroders">
        <input type="text" value="" name="Search" id="Search" />

        <input type="submit" class="button-medium" value="Search" />
    </form>

    <input type="submit" class="button-medium" value="Reset" />
</div>

.layout-fund-search-groupfactsheet
{
    padding: 10px 20px;

    border: 1px solid #E7DFD0;

    height: 20px;    
}

.layout-fund-search-groupfactsheet input[type=text]
{
    width: 300px;
}

Answer 1

如果您只需要使用该按钮重新加载页面，您可以将它放在表单内部，这样不会有任何问题。只是不要向该重新加载按钮添加名称属性。

实际的重新加载将由 javascript 完成(我猜)，所以没问题。像这样:

<form method="get" action="/uk/groupfactsheet/schroders">
        <input type="text" value="" name="Search" id="Search" />

        <input type="submit" class="button-medium" value="Search" />
        <input type="button" class="button-medium" value="Reset"
                               onclick="window.location.reload()" />
</form>

工作 fiddle :http://jsfiddle.net/fthAS/