CODEWITHSUNDEEP
htmlcss
DunDev
DunDev

Reputation: 200

Problems with horizontal menu

I'm having some problems in trying to distinguish the difference between display: block and display: inline-block in the example of horizontal menu.

My fiddle: https://jsfiddle.net/4dg0ukk6/

The following lines of code is extracted from the fiddle link mentioned above

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

Should I use display: block or display: inline-block? As I see the result is almost the same. What is exactly the difference between them in this case?

Upvotes: 0

Views: 44

Answers (4)

kojow7
kojow7

Reputation: 11384

The issue is not so much with your a element as it is with your li element. This is because the a elements are nested inside of your li elements.

Your li elements are currently being floated to the left so will line up next to each other. Any changes you make to the a elements only effect how they display inside of the li element. In your case it does not really make much of a difference unless you have more than one a element inside each li.

If you really want to see how things change you will want to change the display of the parent li elements. So instead of the following code:

li {
  float: left;
}

try one of these two options to see the difference:

li {
  display: block;
}

or

li {
  display: inline-block;
}

Upvotes: 1

tushgraph
tushgraph

Reputation: 38

display: block

When You use display:block to li a you can have one in one li in one row

in other hand

display: inline-block When You use display:inline-block to li a you can have multiple in one li in one row

Upvotes: 0

Luca De Nardi
Luca De Nardi

Reputation: 2321

You notice no differences because you're applying that style to a single child inside a parent.

Check here, I've put two links inside the same li, notice the difference between

li a {
  display: block;

and

li a {
  display: inline-block;

Display: Block

Display: Inline-block

Upvotes: 2

Solomon
Solomon

Reputation: 626

Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.

Difference of supported styles as summary:

inline: only margin-left, margin-right, padding-left, padding-right
inline-block: margin, padding, height, width

Upvotes: 0

Related Questions