H1 a sinistra, "bottoni" a destra, allineata verticalmente

Question

Sto cercando di visualizzare su una sola riga:

• un elemento H1 allineato alla sinistra della casella contenente
• pulsanti diversi" "(elementi a qui) allineate alla destra della scatola contenente
• tutto essendo sulla stessa linea di base

è possibile farlo con markup minimo (cioè senza elementi di incarto) e senza dover impostare precisa altezze, line-hei combatte, margin-top, ecc

<div id="block1"> 
    <h1>What a great title</h1> 
    <a href="javascript:void(0)">This link can kill you</a> 
    <a href="javascript:void(0)">Click if you dare</a> 
</div> 

Il violino qui mostra quello che sento sono due direzioni incompatibili (in linea blocchi e non si possono allineare a destra vs. flottante a destra e non è possibile allineare verticalmente): http://jsfiddle.net/GlauberRocha/bUsvX/

Qualche idea?

Answer 1

Si hanno un potenziale problema con il layout - cosa succede se il tuo H1 è troppo lungo e lo sono anche i pulsanti? Si incontreranno l'un l'altro. Per questo motivo, nessun CSS semplice farà - i CSS non fanno magie del genere - dovrebbe implicare una sorta di soluzione al problema di cui sopra.

Tuttavia, ciò che si vuole può semplicemente essere realizzato utilizzando il posizionamento assoluto:

<div style="position: relative;"> 
    <h1 style="position: absolute; left: 0; top: 0">What a great title</h1> 
    <div style="position: absolute; right: 0; top: 0; text-align: right"> 
     <a href="javascript: void(0)">This link can kill you</a> 
     <a href="javascript: void(0)">Click if you dare</a> 
    </div> 
</div> 

Se siete veramente paura che l'intestazione e il contenitore di ancoraggio potrebbero correre in uno all'altro a seconda del contenuto generato, è possibile utilizzare Proprietà CSS max-width e overflow per limitare le caselle contenenti ad alcuni valori sensibili. Il contenuto straripante sarà nascosto ma almeno il layout non si romperà visivamente. Suppongo che la seguente modifica del codice di cui sopra (pardon il duplicato) avrebbe lo scopo:

<div style="position: relative;"> 
    <h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1> 
    <div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden"> 
     <a href="javascript: void(0)">This link can kill you</a> 
     <a href="javascript: void(0)">Click if you dare</a> 
    </div> 
</div> 

Per concludere, si non possibile raggiungere questo obiettivo usando una combinazione proprietà CSS semplice, perché con i CSS (e HTML) , il contenuto scorre da sinistra a destra e dall'alto verso il basso, oppure diventa assolutamente o fisso posizionato che interrompe il flusso. Comunque, non vuole rimanere sulla stessa linea, e voi come progettista del layout sono lasciati con le ambiguità risolutive che tale layout introdurrebbe, come ad esempio cosa fare quando i due treni che corrono da ogni direzione front-collide tra loro: -)

Answer 2

Ho avuto lo stesso problema .. Aggiungi display:inline alla H1, quindi per i pulsanti: float:right; display:inline;

esempio (con l'uso di Twitter Bootstrap):

<h2 style="display:inline">Users</h2> 

<a href="users.xls"><i class="icon-download-alt"></i>XLS</a> 

<form style="display:inline; float:right;"> 
    <input type="text" class="input-medium search-query" name="search"> 
    <button class="btn" type="submit">Search</button> 
</form> 

Answer 3

e 'difficile da raggiungere senza alcun elemento di confezionamento o valori fissi ...

Aggiunta di una line-height fissa sia per l'intestazione e il link sarebbe risolvere il problema piuttosto veloce.

• Allineare i collegamenti con 'display: block; float: giusto 'a destra.
• Ora imposta "altezza riga: 40px;" sia per l'intestazione e il link

dovrebbe funzionare, ma solo quando la dimensione della voce non cambia ....

Answer 4

L'ho fatto per il mio sito un bel fa: un h2 sul a sinistra e un pulsante a destra. Screen shot: cl.ly/image/3K3i412F0M2t

Codice:

<div id="side_bar" class="clearfix"> 
    <h2 style="float: left;">Charity Map</h2> 
    <button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button> 
</div> 

Answer 5

Un approccio potenziale per questo, a seconda delle vostre esigenze, è quello di utilizzare un layout di tabella:

#block3 { 
    display: table; 
    width: 100%; 
    box-sizing: border-box; 
} 

#block3 > * { 
    display: table-cell; 
} 

#block3 > *:last-child { 
    text-align: right; 
} 

JSFiddle: http://jsfiddle.net/bUsvX/39/

Se vuoi che i pulsanti siano rigorosamente allineati a destra, penso che questa soluzione richieda un altro elemento per avvolgerli:

JSFiddle: http://jsfiddle.net/bUsvX/40/