CSS inset-inline รายการ

คำอธิบายและวิธีใช้

inset-inline attribute นี้กำหนดระยะทางขององค์ประกอบตามแนวแถวให้กับองค์ประกอบพ่อของมัน

สัญญาณเตือน:เพื่อให้ attribute นี้มีผล คุณจะต้องกำหนด position attribute。

inset-inline attribute นี้เป็น attribute ที่ย่อของ attribute ต่อไปนี้:

• inset-inline-start
• inset-inline-end

inset-inline ค่าของ属性 สามารถตั้งค่าด้วยวิธีต่าง ๆ :

ถ้าคุณมีค่า inset-inline สองค่า:

inset-inline: 10px 50px;

• ระยะทางจุดเริ่มต้นคือ 10px
• ระยะทางจุดสิ้นสุดคือ 50px

หาก inset-inline มีค่า

inset-inline: 10px;

• ระยะทางของปลายตัวและปลายตัวเปิดทางด้านนอกทั้งสองมีความยาว 10px

CSS ใน inset-inline และ inset-block คุณสมบัติเหล่านี้เป็นคุณสมบัติที่เกี่ยวข้องกับ CSS top、bottom、left และ right คล้ายกันมาก inset-block และ inset-inline คุณสมบัตินี้ขึ้นอยู่กับทิศทางแบบบล็อคและทิศทางแถว

สัญญาณเตือน:คุณสมบัติ CSS ที่เกี่ยวข้อง writing-mode และ direction กำหนดทิศทางแถว inset-inline ผลลัพธ์ขององค์ประกอบนี้ สำหรับหน้าเว็บที่ใช้ภาษาอังกฤษ ทิศทางแถวจะมีทิศทางจากซ้ายไปที่ขวา และทิศทางแบบบล็อคจะมีทิศทางไปลง。

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าระยะทางขององค์ประกอบ <div> ที่มีการจัดตั้งทางเส้นทางของแถวเมื่อเปรียบเทียบกับองค์ประกอบพ่อของมัน:

div {
  inset-inline: 10px 50px;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

เมื่อ <div> มีค่าองค์ประกอบ writing-mode เมื่อค่าองค์ประกอบ vertical-rl มีค่า การวางแถวจะมีทิศทางไปลง ผลลัพธ์คือปลายตัวองค์ประกอบจะเคลื่อนย้ายจากด้านซ้ายไปที่ด้านบน และปลายตัวองค์ประกอบจะเคลื่อนย้ายจากด้านขวาไปที่ด้านล่าง:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง 3

เมื่อ <div> มีค่าองค์ประกอบ direction เมื่อค่าองค์ประกอบ rtl มีค่า การวางแถวจะมีทิศทางจากขวาไปที่ซ้าย ผลลัพธ์คือปลายตัวองค์ประกอบจะเคลื่อนย้ายจากด้านซ้ายไปที่ด้านขวา และปลายตัวองค์ประกอบจะเคลื่อนย้ายจากด้านขวาไปที่ด้านซ้าย:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

ลองทดลองด้วยตัวเอง

การใช้ภาษา CSS

inset-inline: auto|length|initial|inherit;

ค่าขององค์ประกอบ

รายละเอียดเทคโนโลยี

การสนับสนุนของเบราเซอร์

ตัวเลขในตารางนี้แสดงความสามารถของเบราเซอร์ที่ใช้งานคุณสมบัตินี้ครั้งแรกที่สุด。

เพจที่เกี่ยวข้อง

ตัวอย่าง：CSS การจัดตัว

อ้างอิง：CSS position คุณสมบัติ

อ้างอิง：CSS ทิศทาง

อ้างอิง：CSS writing-mode thuộc tính