gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add information on inline block to navigation (#23913)

Browse Source
This commit is contained in:
ninjahellokitty
2018-12-31 14:41:23 +08:00
committed by Kristofer Koishigawa
parent 6a476b50aa
commit 406091303f
1 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
guide/english/css/layout/inline-block/index.md
View File

@ -2,13 +2,30 @@
title: Inline Block title: Inline Block
--- ---
## Inline Block ## Inline Block
Inline-block is a possible value of the display property. inline-block is a possible value of the display property.
Elements marked as _inline-block_ behave like inline elements (_spans_, for example), but can have width and height. Elements marked as _inline-block_ behave like inline elements (_spans_, for example), but can have width and height.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds --> You can add inline-block to navigation so it is displayed horizontally instead of vertically.
HTML:
```html
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
```
CSS:
```css
.nav li {
display: inline-block;
padding: 20px;
}
```
#### More Information: #### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article --> [CSS-Tricks - inline-block](https://css-tricks.com/almanac/properties/d/display/#inline-block)
<a href="https://css-tricks.com/almanac/properties/d/display/#inline-block" target="_blank">This is a great article</a> to read up to understand more about creating layouts with inline-block elements.