CSS - Aynı satırdaki Sol ve Sağ hizalama

Question

Aşağıda, tüm bağlantılar sağa yaslanmış olan bazı örnek kodlar verilmiştir. CSS'yi değiştirmek istiyorum, böylece "Sol" link sol-haklı, diğerleri haklı, ama hepsi aynı çizgide. Bunu nasıl yaparım? peşin

sayesinde

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 Eğer margin-top kaldırmak gerekir sol

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

soldan Ama: 300px aksi sol olacak a.links:link dan sağ altta 300 piksel olmalı.

Answer 2

sen (div) ya da geçersiz kılma bloklarını ayırmak için koymak gerekir @skurpur

tarafından önerilen bağlantıya uygulanan daha spesifik CSS yoluyla

Görüntü eklenmesi gerektiğine inanıyorum: yerleştirmek için bağlantıyı engelleyin - ör. sadece blok elemanları yerleştirilebilir.

Answer 3

Her birini ayrı bir div'a koyun. Bir tane sola, bir sağa. Genişlikleri ayarlayın.

<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

Bu eski bir gönderi, ancak google'da iyi sıralamaya giriyor, dolayısıyla hala alakalı.

Çirkin float kullanmadan aynı çizgide sağa ve sola hizalamanın başka bir yolunu kullandım. Bu bir tablo benzeri ekran kullanır:

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

ben bu şekilde çok daha temiz buluyorum.

Bu birinin işe yaramasını umarız!

Answer 6

justify-content: space-between; ve align-items: baseline; ile display: flex; kapsayıcısını kullanabilirsiniz. Eski ve yeni sözdizimini destekleyen iyi bir sass mixin var: https://github.com/mastastealth/sass-flex-mixin