CSS display: inline-block
Declarația display: inline-block reunește caracteristici ale elementelor inline și block.
Un astfel de element împarte aceeași linie cu vecinii inline sau inline-block, dar acceptă width, height, margin-top și margin-bottom la fel ca un element block.
Exemplu
Aici, display: block este comparat cu display: inline și display: inline-block.
Prompt
Arătați diferența dintre display: inline, display: inline-block și display: block folosind trei elemente span. Span-ul inline are padding și o bordură roșie. Span-ul inline-block are lățime 100px, înălțime 35px, padding 5px și o bordură roșie. Span-ul block are aceleași dimensiuni și bordură ca inline-block.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline vs Inline-Block vs Block</title>
<style>
span.a {
display: inline;
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;
}
</style>
</head>
<body>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">volutpat</span> Donec et nisl at wisi luctus bibendum.</div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">volutpat</span> Donec et nisl at wisi luctus bibendum.</div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">volutpat</span> Donec et nisl at wisi luctus bibendum.</div>
</body>
</html>
Crearea unui meniu de navigare orizontal
Elementele de listă se așază în mod normal pe verticală, iar display: inline-block este folosit adesea pentru a le aranja în schimb pe orizontală.
Exemplu
Dacă aplici display: inline-block elementelor de listă, acestea devin un meniu de navigare orizontal.
Prompt
Creați un meniu de navigare orizontal folosind o listă neordonată cu display: inline-block pe elementele de listă. Meniul are un fundal gri deschis, fără list-style, fără padding/margin pe ul, iar fiecare li are font-size de 18px și padding de 15px.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation Menu</title>
<style>
.nav {
background-color: lightgray;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>