Question

So I have a horizontal navigation bar I created by floating the list elements of an unordered list. It works fine but at the places where two list elements meet two borders form to create double the desired thickness. Is there a way to solve this?

One Solution Attempted:
I can specify the left and right border properties of individual list elements but this approach doesn’t seem very scalable, but it works.

You can view my code and demo here http://jsfiddle.net/mscpg/
or inspect the code below

css

  #navigation_bar {
            overflow: hidden;
            list-style-type: none;
            width: 100%;
        }
            #navigation_bar li {
                text-align: center;
                float: left;
                width: 33%;
                border-style: solid;
                border-width: 1px;
                border-color: black;
            }

HTML

<ul id="navigation_bar">
    <li>Projection</li>
    <li>Real-Time</li>
    <li>Cleanup</li>
</ul>

Answer 1

There are many possible solutions. For instance:

#navigation_bar {
  overflow: hidden;
  list-style-type: none;
  width: 100%;
}
#navigation_bar li {
  text-align: center;
  float: left;
  width: 32%;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  border-left:none;
}
#navigation_bar li.first {    
  border-left:solid 1px black;
}

<ul id="navigation_bar">
  <li class="first">Projection</li>
  <li>Real-Time</li>
  <li>Cleanup</li>
</ul>

Demo

Also – here is with negative margin
​