CSS - Linke und rechte Ausrichtung in derselben Zeile

Question

Unten finden Sie einen Beispielcode, der alle Links rechtsbündig anzeigt. Ich möchte das CSS so ändern, dass der linke Link linksbündig ist, der andere linksbündig ist, aber alle auf derselben Zeile stehen. Wie mache ich das?

Vielen Dank im Voraus,

John

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

Die 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 links nach links

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

Aber müssen Sie die margin-top entfernen: 300px von a.links:link sonst die linke wird 300px unter dem Recht sein.

Answer 2

Sie brauchen, um es Blöcke zu trennen (div) oder Überschreibung über spezifischere CSS, die für den Link gelten, wie von @skurpur

vorgeschlagen

Ich glaube, Sie müssen Anzeige: Block zu dem Link, um es zu positionieren - z. Nur Blockelemente können positioniert werden.

Answer 3

Setzen Sie jedes in ein separates Div. Schweben Sie einen links, einen rechts. Stellen Sie die Breiten ein.

<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 ist ein alter Post, aber es ist gut auf Google eingestuft, so dass es immer noch relevant ist.

Ich benutzte einen anderen Weg, um beide rechts und links auf der gleichen Linie auszurichten, ohne einen hässlichen Schwimmer zu verwenden. Es nutzt eine tabellenartige Anzeige:

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

Ich finde es so viel sauberer.

Hoffe das hilft jemandem!

Answer 6

Sie können display: flex; auf Container mit justify-content: space-between; und align-items: baseline; verwenden. Es gibt gute Sass Mixin für Flex unterstützt alte und neue Syntax: https://github.com/mastastealth/sass-flex-mixin