8

我正在尝试让两个超链接按钮并排放置。我看到了这个问题，但无法使答案起作用。以下是我让按钮并排放置的两次尝试。第一次尝试有效，但超链接到错误的位置。第二个超链接正确但不是并排的。第三个基于这个问题的第三个没有链接到任何地方，但我认为这与使用链接而不是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>
4

4 回答 4

9

如果您只需要简单的链接来工作，只需使用链接并将它们设置为看起来像按钮的样式（另请参阅将锚标记设置为看起来像提交按钮）：

<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>，但这实际上不是合法的 HTML5。FWIW，Firefox 似乎确实可以正确呈现它。

于 2013-08-17T13:56:36.467 回答
2

我只是尝试添加 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;
}

演示：http: //jsfiddle.net/uzDZN/

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

于 2013-08-17T14:01:43.877 回答
2

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

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

但是，如果您想要两个并排的表单，您可以通过添加它们来使它们做到这一点display: inline。这是一个小演示： http: //jsbin.com/Ug​​aMiYu /1/edit

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

于 2013-08-17T13:55:17.170 回答
0

使用常规按钮并将其显示属性设置为内联或内联块对我有用。

于 2016-10-10T23:21:11.153 回答