inline-block lets an element stay in the inline flow while accepting block-style properties such as width and height. It is the useful middle ground between an inline element, which flows with text, and a block element, which starts on its own line. section 9.2
Use inline-block when you want an element to:
- Remain alongside neighboring content instead of taking a full line. section 9.2
- Accept width, height, padding, and other block-related properties. section 9.2
- Create navigation items that display inline while behaving like blocks. section 9.3
A simple horizontal navigation bar
Remove the list bullets, then make each list item inline-block. Add right padding so the labels do not huddle together: ul { list-style-type: none; } li { display: inline-block; padding-right: 1em; } section 9.3
ul {
list-style-type: none;
text-transform: uppercase;
}
li {
display: inline-block;
padding-right: 1em; #1
}
Inspect the complete CSS pattern for turning list items into readable horizontal navigation. section 9.3
