HomeХобби и стильRelated VideosMore From: Ralph Phillips

Use Display Inline-Block CSS to Create a Horizontal Nav Menu

285 ratings | 33290 views
Use display inline-block to treat a block element as inline while still retaining abilities to affect size, margins, and padding like it is a block element.
Html code for embedding videos on your blog
Text Comments (39)
N3Patriots (5 months ago)
I've been struggling on this one, its gotten messy. Some people say use floats, and settings positions absolute and relative, blah, blah, blah. It'd be nice for this to be more in depth although I got a point that I actually want to be at. Thank you.
OG HD (5 months ago)
Ty bro!
piano0011 Lee (9 months ago)
Hello! Someone mentioned that you can also use display:block for this but when I tried it, it did not work.... Can you do this for display: block?
Carlos Booze (11 months ago)
I've been to over 8 channels trying to get an explanation of this and this was the video that did it. That's a sub my friend, thanks!
Crystal S. Lewis (1 year ago)
Thank you!!!
Elhadi Khogali (2 years ago)
thank you
Joseph Torres (2 years ago)
I though the video was great. Im just a little confused as to why do a text-align the the ul and not directly to the li themselves. Im just asking because Im very new. Dont people also do a float to the right if they wanted to text-align right as well??
Vince Jose (1 year ago)
Joseph Torres if you want to have your logo on top of the nav list, then you need to have it in a separate div. If you want to have the logo side by side with the nav bar, you have to set sepearate width for each.. you may have knew this already by now... i am also learning html css right now. :)
Joseph Torres (2 years ago)
Thank you so much for your reply. How would I add a logo with out throwing everything else off?
Ralph Phillips (2 years ago)
Joseph Torres since the list items are changed to inline, you center them by using text-align on the parent ul. Putting text-align on the list items would center the text within the list items. Using float on the list items is great for horizontal navy menus and what I would do most often.
Selman HisokA (2 years ago)
well think but i wanted to make it look like this 1- 2- 3- vertical
Fabrizio Bertoglio (2 years ago)
Thanks a lot. This is great!
swagpack (2 years ago)
Thank you so much oml you saved my life with the inline-block.I had everything right except the 'li' part
AgentCell (3 years ago)
My question is then why would anyone use floats to position the li elements horizontally if one can easily use display:inline or inline-block?
Zara Hussain (1 year ago)
to put our list elements left or right in navigation bar ( may be)
3Dpixel.be (3 years ago)
highwayto hell (3 years ago)
what if i want to put only that longlink5 menu on the extreme right of the nav bar
Practice Repeat (4 years ago)
for the background color, you do not need to type background-color: red;, you can just type background: red; or use hex codes. Use hex codes, it's better. Get used to working with hex codes.
Safeer (4 years ago)
Atlantis Wade (4 years ago)
I am working on a header part of a test website. i put the image logo in the center but the clickable active area for it stretches all the way down to the full height of the header. is this a display option related issue? instead of it stretching all the way to the right like in your video it stretches all the way downwards (but not to the top. top is fine. its right at the edge of the logo). would appreciate your input.
muh2k4 (4 years ago)
Wow! Thank you so much. This helped so much more than every other tutorial. It was very helpful, that you used the different colors and also that you compared inline to inline-block. Keep it up!
Icey Junior (4 years ago)
What if I add another 2nd unordered list into the one of the 1st list and wanted the 2nd list to align vertically so that it forms a double/multiple drop down box? I can't do that .
Vincent Driesens (5 years ago)
i'd love to see you elaborate on this lesson and maybe teach us how to maken this menu drop down.. :)
Haile Michael (5 years ago)
Merci from France.
Kacy Raye (5 years ago)
I came across one of your videos a couple days ago, and I understood your explanation perfectly. This is the 2nd time I randomly come across a video of yours, and something that I've spent 40 minutes trying to understand was explained very well in 8. I'm subscribing.
kamaboko1 (5 years ago)
You cleared up a confusing aspect of web dev for me. Thanks for taking the time to make the video.
Mario Daniele Parodi (5 years ago)
Great job!
Michael Gómez (5 years ago)
Thank you so much!
Zerosixk (5 years ago)
Great vid! Thanks for the help :)
Brite Cristo (5 years ago)
Muy bueno, ¡muchas gracias! Very good, thank you very much!
Free FreeBSD (6 years ago)
awsome videos; brought me so much knowledge. 1 question. I want to create a inline second child (level 2) horizontal menu. (in joomla with a template from artisteer) just want to change the code
Forest San Filippo (6 years ago)
Awesome vid! Just subscribed.
Hdu243 (6 years ago)
great thanks from france
Betty Johnston (6 years ago)
Question: if I create a menu bar as this one can I later make it as editable region in a DW template, or to be editable in a template must be external style- thank you super explanations very clear and your voice also goooood
Ralph Phillips (6 years ago)
Give it a try. You'll likely find that your menu items would end up in the opposite order--displaying right to left.
Luis Arroyo (6 years ago)
Great Video!
thx so much!!
Internet Stranger (7 years ago)
Thank You! You made my day!
CatastroficCat (7 years ago)
Thanks for the explanation, beautifully clear and very helpful, thanks :-)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.