CSS inset-inline-end egenskap

Föregående sida inset-inline
Nästa sida inset-inline-start

Kursrekommendation:

inset-inline-end Definition och användning

Observera:Egenskapen sätter elementets ände i riktningen för raden från änden till föräldrelementet. För att detta egenskap ska fungera måste du specificera position

CSS: inset-inline och inset-block Egenskaperna är relaterade till CSS: top,bottom,left och right Egenskapen liknar mycket, men inset-block och inset-inline Egenskapen är beroende av riktningen för block och riktningen för raden.

Observera:relaterade CSS-egenskaper writing-mode och direction Definierar riktningen för raden. Detta påverkar elementets ände i riktningen för raden samt inset-inline-end Resultatet av egenskapen. För engelska sidor är riktningen för raden från vänster till höger, och riktningen för block är neråt.

Exempel

Exempel 1

Ställ in avståndet mellan den positionerade <div>-elementets ände och föräldrelementet i riktningen för raden:

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

Prova själv

Exempel 2

När <div>-elementets writing-mode När egenskapsvärdet sätts till vertical-rl, är riktningen för raden neråt. Resultatet är att elementets ände flyttas från höger till botten:

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

Prova själv

Exempel 3

När <div>-elementets direction När egenskapsvärdet sätts till rtl, är riktningen för raden från höger till vänster. Resultatet är att elementets ände flyttas från höger till vänster:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standardvärde. Elementets standardinbäddade avstånd.
length	Specificera avstånd med enheter som px, pt, cm osv. Tillåter negativa värden. Se:CSS enheter.
%	Specificera en procentsats av avståndet från föräldrelementet på motsvarande axel.
initial	Sätt detta egenskap till dess standardvärde. Se: initial.
inherit	Följ från föräldrelementet för att arbeta detta egenskap. Se: inherit.

Tekniska detaljer

Standardvärde:	auto
Arv:	Nej
Animaationsproduktion:	Stöds. Se:Animaationsrelaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.insetInlineEnd="30%"