CSS inset-inline-start ominaisuus

Määrittely ja käyttö

inset-inline-start Ominaisuus asettaa elementin alkupään etäisyyden isäelementtiin rivi-askelissa.

Huomioitavaa:Jotta tämä ominaisuus toimisi, on määritettävä position Ominaisuuden kanssa

CSS:n inset-inline ja inset-block Ominaisuudet ovat samanlaisia CSS:n top,bottom,left ja right Ominaisuudet ovat hyvin samanlaisia, mutta inset-block ja inset-inline Ominaisuus riippuu lohko- ja rivi-askelista.

Huomioitavaa:liittyvät CSS-ominaisuudet writing-mode ja direction Määrittelee rivi-askelen. Tämä vaikuttaa elementin alkupään sijaintiin rivi-askelissa ja inset-inline-start Ominaisuuden tuloksena. Englanninkielisillä sivuilla rivi-askel on vasemmalta oikealle, lohko-askel alaspäin.

Esimerkki

Esimerkki 1

Aseta sijoitettu <div>-elementin alkupään etäisyys isäelementtiin rivi-askelissa:

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

Kokeile itse

Esimerkki 2

Kun <div>-elementin writing-mode Kun ominaisuuden arvo asetetaan vertical-rl:ksi, rivi-askel on alaspäin. Tuloksena elementin alkupää siirtyy vasemmalta ylös:

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

Kokeile itse

Esimerkki 3

Kun <div>-elementin direction Kun ominaisuuden arvo asetetaan rtl:ksi, rivi-askel on oikealta vasemmalle. Tässä kuvauksessa on pieni kirjoitusvirhe, se pitäisi olla "Tuloksena elementin alkupää pysyy oikealla (koska rtl:ssä alkupää on alun perin oikea, mutta suhteessa oletusarvoiseen ltr-asetteluun koko sisältö kääntyy)"

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Tekninen yksityiskohta

Selaimen tuki

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

Liittyvät sivut

Oppaita:CSS-sijainnin

Viittaukset:CSS position ominaisuus

Viittaukset:CSS suunta ominaisuus

Viittaukset:CSS writing-mode -ominaisuus