CSS - Alineación izquierda y derecha en la misma línea

Question

A continuación se muestra un código de muestra, que tiene todos los enlaces justificados a la derecha. Me gustaría cambiar el CSS, por lo que el enlace "Izquierda" está justificado a la izquierda, los otros están justificados a la derecha, pero todos están en la misma línea. ¿Cómo puedo hacer eso?

Gracias de antemano,

John

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

El 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

Flotador la izquierda a la izquierda

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

Pero tiene que quitar el margin-top: 300px de a.links:link de lo contrario la izquierda se ser 300px debajo de la derecha.

Answer 2

que necesita para ponerlo para separar bloques (div) o anulación a través de un CSS más específico que se aplica al enlace propuesto por @skurpur

Creo que debe agregar visualización: bloquee el enlace para colocarlo, p. Ej. solo se pueden colocar elementos de bloque.

Answer 3

Ponga cada una en una división separada. Flote uno a la izquierda, uno a la derecha. Establecer los anchos

<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

Es una publicación anterior, pero está bien clasificada en Google, por lo que sigue siendo relevante.

Utilicé otra forma de alinear tanto la derecha como la izquierda en la misma línea, sin utilizar ningún flotador feo. Se hace uso de una pantalla a modo de mesa:

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; 
    } 

Me resulta mucho más limpia de esta manera.

Espero que esto ayude a alguien!

Answer 6

Puede usar display: flex; en el contenedor con justify-content: space-between; y align-items: baseline;. Hay una buena mezcla sass para flex soportando la sintaxis vieja y nueva: https://github.com/mastastealth/sass-flex-mixin