1. Маркированный список Нумерованный список


Горизонтальное отображение списка



Download 163,02 Kb.
bet7/9
Sana01.06.2022
Hajmi163,02 Kb.
#629510
1   2   3   4   5   6   7   8   9
Bog'liq
Списки в HTML (2)

Горизонтальное отображение списка


Иногда мы хотим отобразить списки горизонтально, а не вертикально. Возможно, мы желаем разделить список на несколько колонок, чтобы построить список навигации или разместить несколько пунктов списка в один ряд. В зависимости от содержания и желаемого внешнего вида есть несколько способов для отображения списков в виде одной строки, например, путём принятия значения свойства display для элементов 
  •  как inline или inline-block или через свойство float.

    Отображение списка


    Самый быстрый способ отобразить список на одной строке — это задать элементам 
  •  свойство display со значением inline или inline-block. Это поставит все элементы 
  •  в одну строку с одинаковым промежутком между каждым пунктом списка.
    Если промежутки между элементами 
  •  доставляют проблемы, то они могут быть удалены с помощью тех же методов, что мы обсуждали в уроке 5, «Позиционирование содержимого».
    Намного чаще мы будем использовать значение inline-block вместо значения inline. Значение inline-block позволяет легко добавлять вертикальные отступы и другое пространство к элементам 
  • , в то время как значение inline нет.
    При изменении значения свойства display на inline или inline-block, маркер списка, будь то точка, число или другое, удаляется.
    HTML

    • Оранжевый

    • Зелёный

    • Синий


    CSS
    li {
    display: inline-block;
    margin: 0 10px;
    }

    Демонстрация списка с inline-block

    Списки с float


    Изменение значение свойства display на inline или inline-block быстро, однако это удаляет маркеры списка. Если они необходимы, то добавление float к каждому элементу 
  •  является лучшим вариантом, чем изменение свойства display.
    Установка для всех элементов 
  •  свойства float как left выровняет горизонтально все элементы 
  •  непосредственно рядом друг с другом без каких-либо промежутков между ними. Когда мы используем float для 
  • , маркер списка отображается по умолчанию и будет располагаться поверх элемента 
  •  рядом с ним. Чтобы предотвратить отображение маркера списка поверх других элементов 
  • , должны быть добавлены горизонтальный margin или padding.

    Download 163,02 Kb.

    Do'stlaringiz bilan baham:
  • 1   2   3   4   5   6   7   8   9




    Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
    ma'muriyatiga murojaat qiling

    kiriting | ro'yxatdan o'tish
        Bosh sahifa
    юртда тантана
    Боғда битган
    Бугун юртда
    Эшитганлар жилманглар
    Эшитмадим деманглар
    битган бодомлар
    Yangiariq tumani
    qitish marakazi
    Raqamli texnologiyalar
    ilishida muhokamadan
    tasdiqqa tavsiya
    tavsiya etilgan
    iqtisodiyot kafedrasi
    steiermarkischen landesregierung
    asarlaringizni yuboring
    o'zingizning asarlaringizni
    Iltimos faqat
    faqat o'zingizning
    steierm rkischen
    landesregierung fachabteilung
    rkischen landesregierung
    hamshira loyihasi
    loyihasi mavsum
    faolyatining oqibatlari
    asosiy adabiyotlar
    fakulteti ahborot
    ahborot havfsizligi
    havfsizligi kafedrasi
    fanidan bo’yicha
    fakulteti iqtisodiyot
    boshqaruv fakulteti
    chiqarishda boshqaruv
    ishlab chiqarishda
    iqtisodiyot fakultet
    multiservis tarmoqlari
    fanidan asosiy
    Uzbek fanidan
    mavzulari potok
    asosidagi multiservis
    'aliyyil a'ziym
    billahil 'aliyyil
    illaa billahil
    quvvata illaa
    falah' deganida
    Kompyuter savodxonligi
    bo’yicha mustaqil
    'alal falah'
    Hayya 'alal
    'alas soloh
    Hayya 'alas
    mavsum boyicha


    yuklab olish