CSS inline-block
CSS display: inline-block
display: inline-block xossasi inline va block elementlarning xususiyatlarini birlashtiradi.
display: inline-block berilgan element boshqa inline yoki inline-block elementlar bilan bir qatorda ko‘rinadi. Bundan tashqari, elementga (block elementlardagi kabi)
width,
height,
margin-top va
margin-bottom xossalarini belgilash mumkin.
Quyidagi misolda display: inline, display: inline-block va display: block qanday turlicha ishlashi ko‘rsatilgan:
Misol
span.a {
display: inline; /* the default for span */
padding: 5px;
border: 2px solid red;
}
span.b {
display:
inline-block;
width: 100px;
height:
35px;
padding: 5px;
border: 2px
solid red;
}
span.c {
display: block;
width:
100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
O'zingiz sinab ko'ring »
Gorizontal navigatsiya menyusini yaratish
display: inline-block ko‘pincha ro‘yxat elementlarini vertikal emas, gorizontal ko‘rsatish uchun ishlatiladi. Quyidagi misol gorizontal navigatsiya menyusini yaratadi:
Misol
Gorizontal navigatsiya menyusini yarating:
.nav {
background-color: lightgray;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding:
15px;
}
O'zingiz sinab ko'ring »
CSS CSS xossasi
| Xossa | Description |
|---|---|
| display | Elementning ko‘rsatilish xatti-harakatini (render qilinadigan quti turini) belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!