Geek asks and answers

Correct spacing for multiple word links to align the horizontal navigation bar?

I am creating a text navigation bar evenly distributed across the width of the parent div, but I had a problem with saving certain navigation elements grouped together. Each word, and not every list item, is distributed across the entire width of the div. Is there a way to distribute each element of the list evenly in a div, but keep longer elements like "/ painting and Mixed media" correctly distributed? I also have a phantom space before the first link that I cannot find, so it is not entirely justified, as I hope.

To clarify: The published code displays a link to "/ Painting and Mixed Media" with an additional interval between each word. The example below, where dashes represent spaces in the navigation menu:

Currently: ... / Printing --- / Illustration --- / Painting --- --- --- Mixed --- Media --- / About --- / Blog ...

Desired: ... / Printing --- / Illustration --- / Painting-and-Mixed Media --- / About --- / Blog ...

Here's the CSS:

.navbar{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:16px; 
    text-decoration: none;
    text-align:justify;
    width: 800px;
}

.navbar * {
  display: inline;
}

.navbar span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

a.nav:link {color:#000; text-decoration: none;}
a.nav:visited {color:#000; text-decoration: none;}
a.nav:hover {color:#6CC; text-decoration: none;}
a.nav:active {color:#F90; text-decoration:none;}

And HTML:

<div class="navbar">
    <ul>
    <li><a href="index.html" class="nav">/home</a></li>
    <li><a href="design.html" class="nav">/design </a></li>
    <li><a href="prints.html" class="nav">/prints</a></li>
    <li><a href="illustration.html" class="nav">/illustration</a></li>
    <li><a href="painting.html" class="nav"> /painting &amp; mixed media</a></li>
    <li><a href="about.html" class="nav">/about</a></li>
    <li><a href="external_blog.html" class="nav">/blog</a></li>
    <li><a href="cv.html" class="nav">/cv</a></li>
    </ul>

  <span></span>
    </div>
+3
source share
1 answer

Demo violin

HTML:

<div class="navbar">
    <ul>
        <li><a href="index.html">/home</a></li>
        <li><a href="design.html">/design </a></li>
        <li><a href="prints.html">/prints</a></li>
        <li><a href="illustration.html">/illustration</a></li>
        <li><a href="painting.html">/painting &amp; mixed media</a></li>
        <li><a href="about.html">/about</a></li>
        <li><a href="external_blog.html">/blog</a></li>
        <li><a href="cv.html">/cv</a></li>
    </ul>
    <span></span>
</div>

CSS

.navbar {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px; 
    text-align: justify;
    width: 800px;
}
.navbar * {
    display: inline;
}
.navbar a {
    display: inline-block;
    text-decoration: none;
}
.navbar span {
    display: inline-block;
    width: 100%;
}
.navbar a:link,
.navbar a:visited {color:#000;}
.navbar a:hover {color:#6CC;}
.navbar a:active {color:#F90;}
+2
source

More articles:


All Articles