Làm cách nào để căn chỉnh bên phải một phần tử chặn nội tuyến?

Question

Như bạn có thể thấy trong Fiddle sau: http://jsfiddle.net/EvWc4/3/, tôi hiện đang tìm cách để căn chỉnh liên kết thứ hai (liên kết-alt) sang bên phải của phụ huynh (p).

Tại sao không sử dụng float hoặc vị trí: tuyệt đối bạn sẽ nói, lý do chính là tôi thích thực tế là thuộc tính hiển thị (inline-block) của liên kết cho phép chúng được căn chỉnh theo cách tự nhiên .

Bằng cách sử dụng phao hoặc vị trí: tuyệt đối; Tôi sẽ bị buộc phải tính toán và đặt thêm một số lợi nhuận trên cùng hoặc giá trị trên cùng để căn chỉnh các liên kết theo chiều dọc.

Đây là mã nhưng thấy rõ hơn về Fiddle http://jsfiddle.net/EvWc4/3/:

<p> 
     <a href="#" class="link">link</a> 
     <a href="#" class="link link-alt">link alt</a> 
    </p> 

    p { 
     padding: 20px; 
     background: #eee; 
    } 
    .link { 
     display: inline-block; 
     padding: 10px; 
     background: #ddd; 
    } 
    .link-alt { padding: 20px; } 

Answer 1

Để làm điều này với CSS3 bạn có thể sử dụng mô hình hộp flex

HTML:

<div class="content"> 
    <div class="box box1"><a>Link 1</a></div> 
    <div class="box box2"></div> 
    <div class="box box3"><a>Link 2</a></div> 
</div> 

CSS:

.content { 
    display: box; 
    box-orient: horizontal; 
    box-pack: center; 
    box-align: center; 
} 
.box2 { 
    box-flex: 1; 
} 

(cần nhà cung cấp các tiền tố)

http://jsfiddle.net/EvWc4/18/

Answer 2

Thuộc tính float không có mang về vị trí thẳng đứng của phần tử.

p{padding:20px;background:#eee;overflow:auto;} 
.link-alt{padding:20px; float:right} 

sẽ thực hiện những gì bạn đang tìm kiếm. Thiết lập tràn của cha mẹ để một cái gì đó bên cạnh đó là mặc định (có thể nhìn thấy) sẽ buộc nó để điều trị trẻ em nổi như các yếu tố bình thường.

Reference article

Answer 3

Bạn có thể thiết lập các position để absolute và sử dụng right: 0

.wrapper { 
    position: relative; 
} 
.right { 
    position: absolute; 
    right: 0; 
} 

http://jsfiddle.net/EvWc4/13/

Answer 4

tôi đã không kiểm tra này ở tất cả các bên ngoài của Chrome, vì vậy nó có thể hút cho IE.

Giải pháp đơn giản (và giới hạn) này sử dụng text-align: right và width: 50% trên các trẻ em được căn chỉnh và white-space: nowrap trên bố mẹ để đạt được kết quả mong muốn.

Ví dụ: http://jsfiddle.net/erikjung/ejcJZ/

.vertically-centered-module { 
    white-space: nowrap; 
} 

.vertically-centered-module > * { 
    display: inline-block; 
    vertical-align: middle; 
    width: 50%; 
} 

.vertically-centered-module > :last-child { 
    text-align: right; 
} 

Answer 5

Tôi đã cập nhật Pethas Ví dụ, để nó có thể được thực hiện trong CSS2 tinh khiết. Nó không hoạt động trong IE7, vì nó không hỗ trợ display: table-cell; mà tôi sử dụng.

http://jsfiddle.net/EvWc4/133/

Answer 6

CSS3 flex và lưới mặt hàng có nghĩa vụ phải giải quyết những vấn đề này, nhưng hỗ trợ tiêu chuẩn vẫn còn đốm như của năm 2013.

Trở lại với thế giới thực. Tôi không nghĩ rằng nó có thể làm điều này hoàn toàn trong CSS2.1 (IE8 +) không có hacks pixel. Vấn đề là, sự liên kết văn bản được điều khiển bởi phần tử cha, và vì hai neo chia sẻ cha mẹ của chúng, cả hai đều liên kết với bên trái hoặc bên phải. Và biện minh không hoạt động trên dòng cuối cùng.

Nếu bạn có thể chịu đựng một chút HTML bổ sung, có hai phương pháp:

1) Thêm một inline được đảm bảo để quấn dây chuyền, và sau đó cố gắng để ẩn dòng trống. Điều này cho phép bạn sử dụng text-align hợp lý trên parent.

<p> 
    <a href="#" class="link">link</a> 
    <a href="#" class="link link-alt">link alt</a> 
    <span class="boom"></span> 
</p> 

<style type="text/css"> 
    p { 
     padding: 20px; 
     background: #eee; 
     text-align: justify 
    } 

    .link { 
     display: inline-block; 
     padding: 10px; 
     background: #ddd; 
    } 

    .link-alt { 
     padding: 20px; 
    } 

    span { 
     display: inline-block; 
     height: 0; 
     width: 100% 
    } 
</style> 

Ưu điểm: hoạt động trên bất kỳ số khối nội tuyến nào, không chỉ hai. Chỉ cần thêm một chút HTML.

Nhược điểm: cần nỗ lực để ẩn dòng văn bản cuối cùng (trống) (đặt khối nội tuyến bên trong nó thành 0 độ cao sẽ không giúp bạn), và bạn sẽ phải khéo léo với lề hoặc thứ gì đó để làm cho nó thực sự hiệu quả. Thảo luận thêm: How do I *really* justify a horizontal menu in HTML+CSS?

2) Thêm một lớp khối nội tuyến khác lên trên các thẻ neo của bạn và định kích thước chúng thành 50%. Sau đó, bạn có thể áp dụng căn chỉnh văn bản riêng biệt để có bố cục cuối cùng mà bạn yêu cầu. Điều quan trọng là không có khoảng trắng nào được phép giữa hai khối nội tuyến có kích thước đến 50% hoặc bạn sẽ bao bọc dòng.

<p> 
    <span class="left"> 
     <a href="#" class="link">link</a> 
    </span><span class="right"> 
     <a href="#" class="link link-alt">link alt</a> 
    </span> 
</p> 

<style type="text/css"> 
    p { 
     padding: 20px; 
     background: #eee; 
    } 

    .link { 
     display: inline-block; 
     padding: 10px; 
     background: #ddd; 
    } 

    .link-alt { 
     padding: 20px; 
    } 

    span { 
     display: inline-block; 
     width: 50% 
    } 

    .left { 
     text-align: left 
    } 

    .right { 
     text-align: right 
    } 
</style> 

Ưu điểm: tạo bố cục chính xác mà bạn yêu cầu mà không làm ô nhiễm mô hình hộp bên ngoài.

Nhược điểm: chỉ hoạt động cho hai khối nội tuyến (bạn có thể thử mở rộng nó, nhưng nó nhanh chóng trở nên thực sự phức tạp). Dựa vào không có khoảng trống thừa, điều này có thể gây nguy hiểm cho việc đánh dấu được định dạng độc đáo của bạn.

Answer 7

Tôi tin rằng điều này hoàn thành những gì bạn đang tìm kiếm:

.link-alt { 
    position: absolute; 
    right: 0; top: 0; bottom: 0; 
    margin: auto; 
    max-height: 1em; 
} 

Bạn có thể sử dụng position: absolute và right: 0 để có được sự liên kết đúng. Để giữ căn giữa, bạn có thể sử dụng top: 0; bottom: 0; margin: auto;. Tất nhiên, bạn cũng sẽ cần đặt chiều cao trên phần tử hoặc nó sẽ kéo dài đến chiều cao đầy đủ của phần tử gốc.

Đây là một bí quyết: http://jsfiddle.net/pHppA/