Atrybut CSS inset-inline-end

Polecane kursy:

inset-inline-end Definicja i użycie

Uwaga:Atrybut ustawia odległość końca elementu w kierunku wiersza od elementu nadrzędnego. Aby ten atrybut działał, musisz określić position

CSS inset-inline i inset-block Atrybuty są podobne do atrybutów CSS top,bottom,left i right Atrybut bardzo podobny, ale inset-block i inset-inline Atrybut zależy od kierunku blokowego i kierunku wiersza.

Uwaga:powiązane atrybuty CSS writing-mode i direction Definiuje kierunek wiersza. To wpływa na pozycję końca elementu w kierunku wiersza oraz inset-inline-end Wynik atrybutu. Dla stron angielskich kierunek wiersza to od lewej do prawej, a kierunek blokowy to w dół.

Przykład

Przykład 1

Ustaw odległość końca umieszczonego <div> elementu w kierunku wiersza od elementu nadrzędnego:

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

Spróbuj sam

Przykład 2

Kiedy atrybut <div> elementu writing-mode Kiedy wartość atrybutu ustawiona jest na vertical-rl, kierunek wiersza to w dół. W rezultacie krawędź elementu przesuwa się z prawej strony do dołu:

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

Spróbuj sam

Przykład 3

Kiedy atrybut <div> elementu direction Kiedy wartość atrybutu ustawiona jest na rtl, kierunek wiersza to od prawej do lewej. W rezultacie krawędź elementu przesuwa się z prawej strony do lewej:

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

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Szczegóły techniczne

Wspierane przeglądarki

Tabela zawiera wersje przeglądarek, które w pełni wspierają tę właściwość.

Strony powiązane

教程:Umieszczenie CSS

Wskazówka:Atrybut position w CSS

Wskazówka:Atrybut direction w CSS

Wskazówka:Atrybut writing-mode w CSS