CSS - Allineamento sinistro e destro sulla stessa riga

Question

Di seguito è riportato un codice di esempio, che ha tutti i collegamenti giustificati. Vorrei cambiare il CSS in modo che il link "Sinistra" sia giustificato a sinistra, gli altri sono giustificati a destra, ma sono tutti sulla stessa linea. Come lo faccio?

Grazie in anticipo,

John

Il codice HTML:

<div class="mainlinks"> 
    <a href="left.php" class="links">Left</a> 
    <a href="right1.php" class="links">Right1</a> 
    <a href="right2.php" class="links">Right2</a> 
</div> 

Il CSS:

.mainlinks 
    { 
    text-align:right; 
    margin-top:3px; 
    margin-right:10px; 
    margin-bottom:0px; 
    padding:0px; 
    } 

a.links:link { 
    color: #FF0000; text-decoration: none; 
    text-align:center; 
    margin-left:8px; 
    margin-top:300px; 
    margin-bottom:0px; 
    padding:2px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    } 

Answer 1

Float sinistra a sinistra

.left {float:left;} 

    <div class="mainlinks"> 
     <a href="left.php" class="links left">Left</a> 
     <a href="right1.php" class="links">Right1</a> 
     <a href="right2.php" class="links">Right2</a> 
    </div> 

Ma è necessario rimuovere il margin-top: 300px dal a.links:link altrimenti la sinistra essere 300px sotto la destra.

Answer 2

è necessario mettere a separare i blocchi (div) o di esclusione tramite CSS più specifico che si applica al link come proposto da @skurpur

credo sia necessario aggiungere display: bloccare il collegamento per posizionarlo - ad es. solo gli elementi di blocco possono essere posizionati.

Answer 3

Mettere ciascuno in un div separato. Float one left, one right. Imposta le larghezze.

<div class="mainlinks"> 
    <div class="left">  
     <a href="left.php" class="links">Left</a> 
    </div> 
    <div class="right"> 
     <a href="right1.php" class="links">Right1</a> 
     <a href="right2.php" class="links">Right2</a> 
    </div> 
</div> 

CSS

.mainlinks .left { 
    float:left; 
    width: 49%; 
} 

.mainlinks .right { 
    float:right; 
    width: 49%; 
} 

Answer 4

<style> 
.mainlinks 
    { 
    text-align:right; 
    margin-top:3px; 
    margin-right:10px; 
    margin-bottom:0px; 
    padding:0px; 
    } 

a.links:link { 
    color: #FF0000; text-decoration: none; 
    text-align:center; 
    margin-left:8px; 
    margin-top:300px; 
    margin-bottom:0px; 
    padding:2px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    } 

.right { float: right } 
.left { float: left } 

</style> 
<div class="mainlinks"> 
    <a href="left.php" class="links left">Left</a> 
    <a href="right1.php" class="links right">Right1</a> 
    <a href="right2.php" class="links right">Right2</a> 
</div> 

Answer 5

È un vecchio post, ma è ben posizionato su google, quindi è ancora pertinente.

Ho usato un altro modo per allineare sia la destra che la sinistra sulla stessa linea, senza utilizzare alcun galleggiante brutto. Si avvale di un display da tavolo simile:

HTML:

    <footer> 
     <nav>links (to the left)</nav> 
     <p>copyright (to the right)</p> 
    </footer> 

CSS:

    footer 
    { 
     display: table; 
     width: 100%; 
    } 
    footer nav 
    { 
     display: table-cell; 
     text-align: left; 
    } 
    footer p 
    { 
     display: table-cell; 
     text-align: right; 
    } 

Trovo molto più pulito in questo modo.

Spero che questo aiuti qualcuno!

Answer 6

È possibile utilizzare display: flex; nel contenitore con justify-content: space-between; e align-items: baseline;. C'è un buon sass mixin per flex che supporta la sintassi vecchia e nuova: https://github.com/mastastealth/sass-flex-mixin