Question

我正在尝试将两个超链接按钮并排放置。我看到this question但无法使答案奏效。以下是我尝试将按钮并排的两次尝试。第一次尝试有效，但超链接到错误的位置。第二个超链接正确但不是并排。第三个基于this question的内容并未链接到任何地方，但我认为这与使用链接而不是Javascript:submitRequests()有关。

<!DOCTYPE html>
<html>
    <body>

    <head>
        <style>
            .container {
                overflow: hidden;
            }

            button {
               float: left;
            }

            button:first-child {
                margin-right: 5px;
            }
        </style>
    </head>

    <form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
        <input type="submit" value="paste2">
    </form>
    <form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
        <input type="submit" value="colSplit">
    </form>

    Attempt 1
    <form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
        <input type="submit" value="paste2">
            <form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
                <input type="submit" value="colSplit">
            </form>
    </form>

    Attempt 2   
    <form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
        <input type="submit" value="paste2">
    </form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
        <input type="submit" value="colSplit">
    </form>

    Attempt 3
    <div class="container">
        <button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
        <button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
    </div>

    </body>
</html>

Answer 1

如果你只需要简单的链接就可以了，只需使用链接并将它们设计为类似按钮（另请参阅Styling an anchor tag to look like a submit button）：

<style>
    .button {
        appearance: button;
        -moz-appearance: button;
        -webkit-appearance: button;
        text-decoration: none; 
        font: menu; 
        color: ButtonText;
        display: inline-block; 
        padding: 2px 8px;
    }
</style>

<div class="container">
    <a href="http://trinker.github.io/qdap_dev/paste2.html" class="button">paste2</a>
    <a href="http://trinker.github.io/qdap_dev/colSplit.html" class="button">colSplit</a> text
</div>

你也可以<a href="..."><button>paste2</button></a>，但这是not actually legal HTML5。 FWIW，Firefox似乎确实正确渲染它。

Answer 2

button会自动并排排列，因为它们默认为display: inline-block（我认为）。我会删除float: left，因为它可能会在嵌套时导致一些问题。

你永远不应该嵌套表格。它会导致一些非常棘手的事情。

但是，如果您想要并排放置两个表单，则可以通过向其添加display: inline来实现这一目的。这是一个小型演示：http://jsbin.com/UgaMiYu/1/edit

onclick属性根本不应有任何区别。

Answer 3

我只是尝试添加css来尝试2.如何：

<强> HTML：

<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
    <input type="submit" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
    <input type="submit" value="colSplit"/>
    </form>

<强> CSS：

form{
    float:left;
}

DEMO： http://jsfiddle.net/uzDZN/

注意：将类添加到具有此按钮的表单。否则css可能影响网站中的其他表单元素。

Answer 4

利用常规按钮并将其显示属性设置为内联或内联块为我工作。

两个按钮并排

4 个答案: