8

2 つのハイパーリンク ボタンを並べて表示しようとしています。この質問を見ましたが、答えを機能させることができません。以下は、ボタンを並べて表示するための 2 つの試みです。最初の試行は機能しますが、間違った場所へのハイパーリンクが表示されます。2 番目のリンクは正しくハイパーリンクされていますが、横に並んでいません。この質問に基づく 3 番目はどこにもリンクしていませんが、代わりにリンクを使用することに関係していると思います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

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 が Web サイトの他のフォーム要素に影響を与える可能性があります。

于 2013-08-17T14:01:43.877 に答える