CSS - Căn trái và phải trên cùng một dòng

Question

Dưới đây là một số mã mẫu, trong đó có tất cả các liên kết được chứng minh đúng. Tôi muốn thay đổi CSS để liên kết "Trái" được căn lề trái, các liên kết khác được hợp lý hóa, nhưng chúng đều nằm trên cùng một dòng. Làm thế nào để làm điều đó?

Cảm ơn trước,

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

phao bên trái sang trái

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

Nhưng bạn cần phải loại bỏ các margin-top: 300px từ a.links:link khác bên trái sẽ ở bên phải 300px.

Answer 2

bạn cần phải đặt nó vào khối tách (div) hoặc ghi đè thông qua CSS cụ thể hơn áp dụng cho liên kết như được đề xuất bởi @skurpur

tôi tin rằng bạn phải thêm hiển thị: chặn vào liên kết để định vị nó - ví dụ: chỉ các phần tử khối có thể được định vị.

Answer 3

Đặt mỗi div riêng biệt. Float một trái, một bên phải. Đặt độ rộng.

<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

Đó là một bài đăng cũ, nhưng nó cũng được xếp hạng trên google vì vậy nó vẫn có liên quan.

Tôi đã sử dụng một cách khác để căn chỉnh cả phải và trái trên cùng một dòng, mà không sử dụng bất kỳ dấu phẩy xấu xí nào. Nó làm cho sử dụng một bảng hiển thị như:

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

tôi thấy nó sạch hơn nhiều theo cách này.

Hy vọng điều này sẽ giúp ai đó!

Answer 6

Bạn có thể sử dụng display: flex; trên vùng chứa với justify-content: space-between; và align-items: baseline;. Có hỗn hợp sass tốt cho flex hỗ trợ cú pháp cũ và mới: https://github.com/mastastealth/sass-flex-mixin