คุณสมบัติ CSS right สำหรับตำแหน่งแนวนอน

คุณสมบัติ right ใช้สำหรับกำหนดตำแหน่งแนวนอนขององค์ประกอบ ตั้งค่าได้ดังนี้:

right: auto | length | initial | inherit;

ตัวอย่างที่ 1: ใช้ right: 90px กับ position: absolute

<!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    background-color: orange;    position: absolute;    right: 90px; } </style> </head> <body> <h2>Demo Heading</h2> <div>This is demo text... </div> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: ใช้ right: 0px กับ position: relative

<!DOCTYPE html> <html> <head> <style> .demo {    background-color: orange;    width: 100px;    position: relative;    right: 0px;    color: white; } </style> </head> <body> <h1>Details</h1> <div class="demo">Examination Center near ABC College.</p> <div class="demo2">Exam begins at 11AM.</p> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 3: ใช้ค่าลบ right: -100px

<!DOCTYPE html> <html> <head> <style> .demo {    background-color: orange;    width: 100px;    position: relative;    right: -100px;    color: white; } </style> </head> <body> <h1>Details</h1> <div class="demo">Examination Center near ABC College.</p> <div class="demo2">Exam begins at 11AM.</p> </body> </html>

ผลลัพธ์

คำอธิบายการทำงาน

หมายเหตุ: ค่า auto (ค่าเริ่มต้น) จะคำนวณอัตโนมัติ ตาม context ของ layout