CSS inset-inline-end ominaisuus

Määrittely ja käyttö

inset-inline-end Ominaisuus asettaa elementin päätyyn rivitys suunnassa olevan etäisyyden isäelementtiin.

Huomioitavaa:Jotta tämä ominaisuus vaikuttaisi, on määritettävä position Ominaisuudet.

CSS:n inset-inline ja inset-block Ominaisuudet vastaavat CSS:n top,bottom,left ja right Ominaisuus on hyvin samanlainen, mutta inset-block ja inset-inline Ominaisuus riippuu lohkosuunnasta ja rivitys suunnasta.

Huomioitavaa:liittyviin CSS-ominaisuuksiin writing-mode ja direction Määrittelee rivitys suunnan. Tämä vaikuttaa elementin päätyyn rivitys suunnassa ja inset-inline-end Ominaisuuden vaikutus. Englanninkielisillä sivuilla rivitys suunta on vasemmalta oikealle, ja lohko suunta on alas.

Esimerkki

Esimerkki 1

Aseta sijoitettu <div>-elementin päätyyn isäelementtiin rivitys suunnassa oleva etäisyys:

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

Kokeile itse

Esimerkki 2

Kun <div>-elementin writing-mode Kun ominaisuuden arvo asetetaan vertical-rl:ksi, rivitys suunta on alhaalta ylös. Tämä tarkoittaa, että elementin pääty siirtyy oikealta alaspäin:

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

Kokeile itse

Esimerkki 3

Kun <div>-elementin direction Kun ominaisuuden arvo asetetaan rtl:ksi, rivitys suunta on oikealta vasemmalle. Tämä tarkoittaa, että elementin pääty siirtyy oikealta vasemmalle:

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

Kokeile itse

CSS syntaksi

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

Ominaisuusarvo

Arvo Kuvaus
auto Oletusarvo. Elementin oletusarvoinen sisäänrakennettu etäisyys.
length Määritä etäisyys px, pt, cm jne. yksiköinä. Sallitaan negatiiviset arvot. Katso:CSS yksiköt.
% Määritä suhteellinen etäisyys suhteessa isäelementtiin vastaavassa akselissa olevaan kohtaan prosentteina.
initial Aseta tämä ominaisuus sen oletusarvon arvoksi. Katso: initial.
inherit Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: auto
Perinnäisyys: Ei
Animaation tekeminen: Tuki. Katso:Animaatiotunnukset.
Versio: CSS3
JavaScript syntaksi: object.style.insetInlineEnd="30%"

Selaimen tuki

Taulukon numerot merkitsevät ensimmäistä selainta, joka tukee kyseistä ominaisuutta täysin.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Liittyvät sivut

Oppitunti:CSS-sijoittelu

Viittaus:CSS position ominaisuus

Viittaus:CSS direction ominaisuus

Viittaus:CSS writing-mode ominaisuus