CSS inset-inline ιδιότητα

Ορισμός και χρήση

inset-inline Η ρύθμιση της απόστασης του στοιχείου από το γονικό στοιχείο στην κατεύθυνση της γραμμής.

Σημείωση:Για να ενεργοποιηθεί αυτή η ιδιότητα, πρέπει να καθοριστεί position ιδιότητα

inset-inline Η ιδιότητα είναι συντομευμένη έκδοση των παρακάτω ιδιοτήτων:

• inset-inline-start
• inset-inline-end

inset-inline Οι τιμές της ιδιότητας μπορούν να οριστούν με διάφορους τρόπους:

Αν η ιδιότητα 'inset-inline' έχει δύο τιμές:

inset-inline: 10px 50px;

• Η απόσταση του αρχικού σημείου είναι 10px
• Η απόσταση του τέλους είναι 50px

Αν η ιδιότητα inset-inline έχει μια τιμή:

inset-inline: 10px;

• Η απόσταση από την αρχή και το τέλος είναι 10px

Το CSS inset-inline και inset-block ιδιότητες είναι παρόμοιες με το CSS top、bottom、left και right Παρόμοια με την ιδιότητα inset-block και inset-inline Η ιδιότητα εξαρτάται από την κατεύθυνση των κρατήρων και την κατεύθυνση γραφής.

Σημείωση:συναφείς ιδιότητες CSS writing-mode και direction Καθορίζει την κατεύθυνση γραφής. Αυτό επηρεάζει την αρχή και το τέλος της γραμμής, καθώς και inset-inline Το αποτέλεσμα της ιδιότητας. Για τις σελίδες στα αγγλικά, η κατεύθυνση γραφής είναι από αριστερά προς δεξιά και η κατεύθυνση των κρατήρων είναι προς τα κάτω.

Παράδειγμα

Παράδειγμα 1

Ρύθμιση της απόστασης μεταξύ του στοιχείου div που έχει τοποθετηθεί και του γονικού στοιχείου στην κατεύθυνση γραφής:

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

Προσπαθήστε το προσωπικά

Παράδειγμα 2

Όταν η τιμή του στοιχείου <div> είναι writing-mode Όταν η τιμή του στοιχείου είναι vertical-rl, η κατεύθυνση γραφής είναι προς τα κάτω. Το αποτέλεσμα είναι η αρχή του στοιχείου να μετακινείται από την αριστερή πλευρά στην κορυφή και το τέλος από τη δεξιά πλευρά στην κάτω γωνία:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

Προσπαθήστε το προσωπικά

Παράδειγμα 3

Όταν η τιμή του στοιχείου <div> είναι direction Όταν η τιμή του στοιχείου είναι rtl, η κατεύθυνση γραφής είναι από δεξιά προς αριστερά. Το αποτέλεσμα είναι η αρχή του στοιχείου να μετακινείται από την αριστερή πλευρά στη δεξιά και το τέλος από τη δεξιά πλευρά στην αριστερή πλευρά:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

Προσπαθήστε το προσωπικά

Γλώσσα CSS

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

Τιμή ιδιότητας

Τεχνικές λεπτομέρειες

Υποστήριξη προγράμματος περιήγησης

Τα αριθμητικά στοιχεία της τάβλας δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Σελίδες συναφείς

Εκμάθηση:CSS Καθορισμός

Αναφορά:CSS position 属性

Αναφορά:CSS direction ιδιότητα

Αναφορά:Ενότητα CSS writing-mode