Đặt phần tử sang bên phải bằng CSS

Question

Tôi đang cố gắng đặt phần tử css vào bên phải của tiêu đề nhưng không chắc chắn chính xác cách thực hiện. Tôi đã thử sử dụng:

position: Absolute; top: 20px; right 0px; 

Điều đó sẽ hiệu quả nhưng nếu bạn điều chỉnh trình duyệt, văn bản sẽ di chuyển với nó.

Tôi tạo ra một JFiddle mà bạn có thể tìm thấy ở đây:

http://jsfiddle.net/rKWXQ/

Bằng cách này bạn có thể nhìn thấy những gì tôi đang cố gắng làm. Tôi có một văn bản bên trong một yếu tố div bọc nói rằng Call Now (555) 555-5555.

Đây là phần tử đầu trang và bên trong là tôi có phần tử right_header.

<div id="header"> 
     <span class="right_header">Call Now (555) 555-5555</span> 
    </div> 

Dưới đây là Tiêu đề CSS của tôi:

/* Header */ 
    #header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;} 
    .right_header{color: #fff; position: absolute; top: 70px; right: 0px} 

Ai đó có thể xin vui lòng cho tôi biết cách thích hợp để thực hiện điều này xin vui lòng?

Lưu ý phía bên trái sẽ có biểu trưng ở đó sẽ không tải trong JFiddle!

Cảm ơn!

Answer 1

Bạn có thể dễ dàng chỉ float ở bên phải, không cần phải relative hoặc absolute định vị.

.right_header { 
    color: #fff; 
    float: right; 
} 

Updated jsFiddle - có thể cần phải thêm một số padding/margins-like this.

Answer 2

Như JoshC đã đề cập, sử dụng float là một tùy chọn. Tôi nghĩ rằng tình hình của bạn cho thấy một giải pháp, mặc dù.

Bạn cần đặt position: relative trên thành phần #header để position: absolute trên #right_header của bạn có hiệu lực. khi bạn đã đặt, bạn có thể tự do định vị #right_header tuy nhiên bạn muốn liên quan đến #header

Answer 3

Câu trả lời bằng cách sử dụng phao từ JoshC sẽ hoạt động tốt, tuy nhiên, tôi nghĩ có một lý do không hoạt động.

Lý do mã của bạn không hoạt động, là vị trí tuyệt đối có liên quan đến vị trí có kích thước 0x0.

'' phải là vị trí tuyệt đối để mã này hoạt động.

#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;} 

thay đổi nó để ...

#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;} 

Answer 4

Bạn có thể làm theo cách này còn nếu bạn muốn làm gì với vị trí, Hãy thử này xin vui lòng

#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;} 


.right_header{color: #fff; position: absolute; top: 0px; right: 0px}