Ετικέτα HTML <ul>

  • Προηγούμενη σελίδα <u>
  • Επόμενη σελίδα <var>

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

<ul> ετικέτα για να ορίσετε μη εξοργισμένη (με σημαίες) λίστα.

Χρησιμοποιήστε <ul> ετικέτες και <li> ετικέτες για τη δημιουργία μη εξοργισμένης λίστας.

Συμβουλή:Χρησιμοποιήστε CSS γιαΡύθμιση στυλ λίστας.

Συμβουλή:Για σειριακές λίστας, χρησιμοποιήστε <ol> ετικέτα.

Για περισσότερες πληροφορίες:

Εκμάθηση HTMLΛίστα HTML

Εγχειρίδιο HTML DOMΌνειρο αντικείμενο Ul

Εκμάθηση CSS:Ρύθμιση στυλ λίστας

Παράδειγμα

Παράδειγμα 1

Μια μη εξοργισμένη λίστα HTML:

<ul>
  <li>Καφέ</li>
  <li>Τσάι</li>
  <li>Γάλα</li>
</ul>

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Ρύθμιση διαφορετικών τύπων λίστας (χρησιμοποιώντας CSS):

<ul style="list-style-type:circle">
  <li>Καφέ</li>
  <li>Τσάι</li>
  <li>Γάλα</li>
</ul>
<ul style="list-style-type:disc">
  <li>Καφέ</li>
  <li>Τσάι</li>
  <li>Γάλα</li>
</ul>
<ul style="list-style-type:square">
  <li>Καφέ</li>
  <li>Τσάι</li>
  <li>Γάλα</li>
</ul>

Δοκιμάστε το προσωπικά

Παράδειγμα 3

Αύξηση και μείωση της γραμμικής ύψους στη λίστα (χρησιμοποιώντας CSS):

<ul style="line-height:180%">
  <li>Καφέ</li>
  <li>Τσάι</li>
  <li>Γάλα</li>
</ul>
<ul style="line-height:80%">
  <li>Καφέ</li>
  <li>Τσάι</li>
  <li>Γάλα</li>
</ul>

Δοκιμάστε το προσωπικά

Παράδειγμα 4

Δημιουργία μιας άλλης λίστας εντός της λίστας (καταχωρημένη λίστα):

<ul>
  <li>Καφέ</li>
  <li>Τσάι</li>
    <ul>
      <li>Pu'er</li>
      <li>Πράσινο τσάι</li>
    </ul>
  </li>
  <li>Γάλα</li>
</ul>

Δοκιμάστε το προσωπικά

Παράδειγμα 5

Δημιουργία πιο σύνθετων καταχωρημένων λιστών:

<ul>
  <li>Καφέ</li>
  <li>Τσάι</li>
    <ul>
      <li>Pu'er</li>
      <li>Πράσινο τσάι</li>
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Γάλα</li>
</ul>

Δοκιμάστε το προσωπικά

Γενικές ατρύπυτες

<ul> Η ετικέτα υποστηρίζει επίσης Γενικές ατρύπυτες στο HTML.

ατρύπυτα γεγονότων

<ul> Η ετικέτα υποστηρίζει επίσης Ατρύπυτα γεγονότων στο HTML.

Προεπιλεγμένες ρυθμίσεις CSS

Οι περισσότεροι περιηγητές θα χρησιμοποιήσουν τις παρακάτω προεπιλεγμένες τιμές <ul> Στοιχείο:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Δοκιμάστε το προσωπικά

Υποστήριξη浏览器

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
  • Προηγούμενη σελίδα <u>
  • Επόμενη σελίδα <var>