CSS inset-inline-end egenskab

Definition og brug

inset-inline-end egenskab for at indstille afstanden mellem elementets ende i rækkefølgen og forældrelige element.

Bemærk:For at gøre denne egenskab effektiv, skal du specificere position egenskaber.

CSS' inset-inline og inset-block egenskaber er sammenlignelige med CSS' top,bunden,venstre og højre Egenskaber er meget lignende, men inset-block og inset-inline Egenskaben afhænger af blokretning og rækkefølge.

Bemærk:relaterede CSS egenskaber writing-mode og direction Definerer rækkefølgen. Dette påvirker elementets endeplacering i rækkefølgen samt inset-inline-end Egenskabets resultat. For engelske sider er rækkefølgen fra venstre til højre, blokretningen er nedad.

Eksempel

Eksempel 1

Indstil afstanden mellem det positionerede <div>-element og forældrelige element i rækkefølgen:

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

Prøv det selv

Eksempel 2

Når <div>-elementets writing-mode Når egenskabsværdien sættes til vertical-rl, er rækkefølgen nedad. Resultatet er, at elementets ende flyttes fra højre til bunden:

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

Prøv det selv

Eksempel 3

Når <div>-elementets direction Når egenskabsværdien sættes til rtl, er rækkefølgen fra højre til venstre. Resultatet er, at elementets ende flyttes fra højre til venstre:

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Tekniske detaljer

Browser understøttelse

Tabellen talene viser den første browserversion, der fuldt ud understøtter egenskaben.

Relaterede sider

Tutorial:CSS positionering

Referencer:CSS position egenskab

Referencer:CSS direction egenskab

Referencer:CSS writing-mode egenskab