Display:block not working on top nav

I am trying to build a navigation bar but list elements just won’t line, they build a column instead.
Could you help me find my mistake? Thanks!

http://zelenskaya.github.io/experiments/nav.html

Hi zelenskaya,

You could try using Flexbox (https://learn.freecodecamp.org/responsive-web-design/css-flexbox) to align the list-items as you like.

sandrab

Thanks but it’s not supported by all browsers. So I am learning to style with box layout

Oke, in that case you might want to try using the float property on your list-items, using something like this for example:

li {
	float: left;
	margin-right: 1em;
}
1 Like

they wont line up because li are block level elements so they are taking all space in width, just give them display: inline so they will line up according to their space!

1 Like

Hi @zelenskaya you have a little problem with CSS & HTML but don’t worry failure is success in progress.
Your code needs to look like:


and your CSS:

and Result:

1 Like

Thank you so much everyone! I got it working but I have to more questions keeping me stuck, I will appreciate any advice.

  1. How do you understand how your webpage displays in older browsers?
  2. I cannot make the right padding be 60 px. Currently it’s 40px between menu items and 60 px on the left, and I want it to be also 60px on the right of the right menu item.

Thanks again!

Hi again @zelenskaya

  1. You need to use –webkit to work on older browsers but I have a website which can help you to do automatically :
    https://autoprefixer.github.io/

  2. Sorry, I can’t understand the question but if you want to add padding in the right just write it " padding-right: 60px "

  3. You need to add one more thing at the body CSS ( margin: 0; )
    so it looks like:
    image

Flexbox has pretty damn good browser support (Global prefixed 97.73%), there are a some bugs in IE 10/11 but still.

The only way to know how a page looks in a specific browser is to test it in that browser. There are online cross browser testing platforms but you have to pay to get full usage out if them, LambdaTest lets you do some limited free testing. You can also use emulators and virtual machines, you can read more in the Strategies for carrying out testing which is part of the Cross browser testing module on MDN.

2 Likes