CSS - wyrównanie w lewo i w prawo na tej samej linii

Question

Poniżej znajduje się przykładowy kod, który ma wszystkie linki wyrównane do prawej. Chciałbym zmienić CSS, aby link "Left" był wyrównany do lewej, pozostałe były wyrównane do prawej, ale wszystkie są na tej samej linii. Jak mogę to zrobić?

Dzięki z góry,

John

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> 

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 lewej do lewej

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

Ale trzeba usunąć margin-top: 300px od a.links:link inaczej lewej stronie być 300px poniżej prawej.

Answer 2

trzeba umieścić go na oddzielnych blokach (div) lub nadpisanie poprzez bardziej szczegółowy CSS, stosujący się do linku zgodnie z propozycją @skurpur

Uważam, że musisz dodać ekran: zablokuj link, aby go umieścić - np. można ustawiać tylko elementy blokowe.

Answer 3

Umieść każdy w oddzielnym dziale. Pływak jeden w lewo, jeden w prawo. Ustaw szerokość.

<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

Jest to stary post, ale ma dobrą pozycję w Google, więc nadal jest trafny.

Użyłem innej metody wyrównania prawej i lewej strony na tej samej linii, bez użycia brzydkiego spławika. To sprawia, że ​​korzystanie z wyświetlaczem tabelarycznego:

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

Uważam to znacznie czystsze ten sposób.

Mam nadzieję, że to pomoże komuś!

Answer 6

Możesz użyć display: flex; na kontenerze z justify-content: space-between; i align-items: baseline;. Jest dobry sass mixin dla flexu obsługującego starą i nową składnię: https://github.com/mastastealth/sass-flex-mixin