Due pulsanti affiancati

Sto cercando di rendere due pulsanti ipertestuali affiancati. Ho visto this question ma non riesco a far funzionare le risposte. Di seguito sono riportati i miei due tentativi di affiancare i pulsanti. Il primo tentativo funziona ma i collegamenti ipertestuali nella posizione sbagliata. Il secondo hyperlink correttamente ma non affiancato. Il terzo basato su this question non si collega da nessuna parte, ma penso che abbia a che fare con l'utilizzo di collegamenti invece di Javascript:submitRequests().Due pulsanti affiancati

<!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>

fonte

2013-08-17 Tyler Rinker

Un js fiddle sarebbe bello – Itay

Hai bisogno di caricare i valori dei moduli o semplicemente di collegarli alle pagine? –

Ho bisogno di collegarmi alle pagine –

Se avete solo bisogno collegamenti semplici a lavorare, a soli collegamenti uso e lo stile li a guardare come i pulsanti (vedi anche 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>

È potrebbe anche fare <a href="..."><button>paste2</button></a> ma questo è not actually legal HTML5. FWIW, Firefox sembra renderlo correttamente però.

fonte

2013-08-17 13:56:36

Questo è esattamente ciò che cercavo. –

Potresti espandere sullo stile i link per assomigliare ai pulsanti? –

@TylerRinker Appena aggiornato –

button s sarebbero in fila uno accanto all'altro automaticamente dato che sono display: inline-block di default (credo). Rimuoverei lo float: left poiché potrebbe causare alcuni problemi durante l'annidamento.

Non si dovrebbero mai nidificare i moduli. Porterà ad alcune cose davvero vaghe.

Tuttavia, se si desidera affiancare due moduli, è possibile farlo aggiungendo display: inline. Ecco una piccola demo: http://jsbin.com/UgaMiYu/1/edit

L'attributo onclick non deve fare alcuna differenza.

fonte

2013-08-17 13:55:17

Grazie Bill Sono un newb. Ero più dopo l'aspetto del pulsante con funzionalità di collegamento ipertestuale. –

Capito! Sono contento che tu l'abbia risolto. –

ho solo cercato di aggiungere CSS per tentare 2. come su questo:

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: