两个按钮并排

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

lc.*_*lc. 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>

Run Code Online (Sandbox Code Playgroud)

您也可以这样做,<a href="..."><button>paste2</button></a>但这实际上不是合法的HTML5.FWIW,Firefox似乎确实正确渲染它.

归档时间：	12 年前
查看次数：	48760 次
最近记录：	8 年，11 月前