CSS inset-inline-end Eigenschaft

Definition und Verwendung

inset-inline-end Eigenschaft, die den Abstand zwischen dem Ende des Elements in der Zeile und dem übergeordneten Element festlegt.

Hinweis:Um diese Eigenschaft生效，必须指定 position Eigenschaften

CSS- inset-inline und inset-block Eigenschaften sind mit den CSS- top,bottom,left und right Eigenschaft ähnlich, aber inset-block und inset-inline Die Eigenschaft hängt von der Blockrichtung und der Zeile ab.

Hinweis:mit den entsprechenden CSS-Eigenschaften writing-mode und direction Definiert die Zeile. Dies beeinflusst die Position des Endes des Elements in der Zeile sowie inset-inline-end Das Ergebnis der Eigenschaft. Für englische Seiten verläuft die Zeile von links nach rechts, die Blockrichtung nach unten.

Beispiel

Beispiel 1

Setzen Sie den Abstand zwischen dem positionierten <div>-Element und dem übergeordneten Element in der Zeile

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

Probieren Sie es selbst aus

Beispiel 2

Wenn der <div>-Element writing-mode Wenn der Wert der Eigenschaft auf vertical-rl gesetzt wird, verläuft die Zeile nach unten. Das Ergebnis ist, dass der Ende des Elements von rechts nach unten bewegt wird:

div {
  inset-inline-end: 50px;
  writing-mode: vertical-rl;
}

Probieren Sie es selbst aus

Beispiel 3

Wenn der <div>-Element direction Wenn der Wert der Eigenschaft auf rtl gesetzt wird, verläuft die Zeile von rechts nach links. Das Ergebnis ist, dass der Ende des Elements von rechts nach links bewegt wird:

div {
  inset-inline-end: 50px;
  direction: rtl;
}

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Eigenschaft vollständig unterstützt.

Verwandte Seiten

Tutorial:CSS-Position

Bezugnahme:CSS position Eigenschaft

Bezugnahme:CSS direction Eigenschaft

Bezugnahme:CSS writing-mode Eigenschaft