CODEWITHSUNDEEP
htmlcss
cosmichero2025
cosmichero2025

Reputation: 1029

A better way to space out navigation bar items

I'm trying to space these navigation bar items out evenly and there has to be a better way to do it then just giving all the li items a width and hoping they don't overflow.

HTML

 <header>
        <div id="page_wrapper">
        <nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Fun</a></li>
        <li><a href="#">Entertainment</a></li>
        <li><a href="#">Utilities</a></li>
    </ul>
    </nav>
    </header>

CSS

header {
    background-color: #ccc;
}

nav {
    height: 48px;
}

nav ul {
    margin-left: auto;
    margin-right: auto;
}

nav li {
    display: inline-block;
    height: 100%;
    width: 10%;
}

nav li a {
    font-family: cursive;
    color: #ff1e4b;
    font-size: 16px;
    text-decoration: none;
}

nav li a:hover {
    color: #dd5771;
}

JSFIDDLE:

https://jsfiddle.net/rkmkxjm0/

Upvotes: 0

Views: 32396

Answers (4)

Tyler Roper
Tyler Roper

Reputation: 21672

How about flex?

Put display: flex; on your <ul>. Add justify-content: space-between; to it, and all children will automatically spread out to occupy the full width of their parent. Notice as you change the screen size, they adapt to fit.

(I've also set the width of your page to width: 100%; max-width: 1024px;, so that it will be 1024px when it can be, but will just occupy 100% on smaller screens.)

If you want some space at the beginning and end, simply change justify-content: space-between; to justify-content: space-around;.

#page_wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

body {
  margin-bottom: 60px;
}

header {
    background-color: #ccc;
}

nav {
    height: 48px;
}

nav ul {
    padding: 0;
    display: flex;
    justify-content: space-between;
    list-style-type: none;
}
nav li a {
    font-family: cursive;
    color: #ff1e4b;
    font-size: 16px;
    text-decoration: none;
    
}

nav li a:hover {
    color: #dd5771;
}
<header>
        <div id="page_wrapper">
		<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Fun</a></li>
        <li><a href="#">Entertainment</a></li>
        <li><a href="#">Utilities</a></li>
    </ul>
    </nav>
    </header>

Upvotes: 3

Shtut
Shtut

Reputation: 1407

If you can use external libraries- Bootstrap has the navbar-justified class which does just that for you

Upvotes: 0

Sean Werkema
Sean Werkema

Reputation: 6125

If you don't care that much about backward compatibility, you should consider a flexbox layout, which is supported on most modern browsers, including Firefox, Chrome, Safari, Edge, and, to a limited extent, IE11. (See CanIUse.com/flexbox.)

The layout with flexbox is dirt-simple; just delete the existing CSS rules for your ul and li and go with this:

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;    
}

nav li {
    margin: 0;
    padding: 0;
    display: block;
}

There are a whole variety of other layouts that you can do just as easily using flexbox; you can see all of the options here, with examples: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Nick Gatzouli
Nick Gatzouli

Reputation: 376

Yes, there actually is. Instead of adding a fixed width, you can add a padding difference between each list item.

Here's an example of what you can do with CSS rules:

nav li {
    display: inline-block;
    height: 100%;
    padding: 10px;
}

You can check the updated version of JS fiddle here: https://jsfiddle.net/NikolaosG/rkmkxjm0/1/

P.S. Your original jsfiddle has an issue with <div id="page_wrapper">. The div tag is not closed at the end (before </header>)

Upvotes: 1

Related Questions