Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.
Подреждане с inline-block
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Inline-block: подредба на един ред + контрол върху размера
inline-block комбинира най-доброто от block и inline. Елементите се подреждат един до друг на един ред, както при inline, но същевременно можем да задаваме ширина и височина, както при block. Това е ключово, когато искаме еднакви по размер бутони, подредени хоризонтално.
Стъпка по стъпка – повторете примера
- Създайте списък с няколко
liелемента и им задайте фиксирана ширина (напр. 100px или 200px). - По подразбиране те са
blockи се подреждат един под друг. - Задайте
display: inline;– ще се подредят на един ред, но ширината вече няма да се зачита. - Променете на
display: inline-block;– елементите ще останат на един ред и ще запазят фиксираната си ширина. - Добавете повече текст в един от елементите и наблюдавайте как съдържанието се пренася на нов ред при недостатъчна ширина.
- Подравнете елементите вертикално чрез подходящо вертикално подравняване, така че да започват от едно ниво или да са центрирани един спрямо друг.
Използвани CSS свойства
display: block;– елементът заема цял ред.display: inline;– елементът се подрежда на един ред, без контрол върху ширина/височина.display: inline-block;– подреждане на ред + контрол върху размерите.vertical-align– контролира вертикалното подравняване (напр.top,middle).
