How to display text on the same line?

Question

I am trying to display text "RESET" on the same line but I can't figure it out how to do this...I know that this is easy to do, I've tried display inline , float left, but it just doesn't work. Here's an image which would help you:

HTML:

<div id="kolom8">
            <h2>Partners</h2>
            <div id="nav8">
                <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
                <li class="active"><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
                <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
                <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
                <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
            </div>
            <div id="slider8">
                <a href="#"><img id="back8" src="images/back.png" /></a>
                <a href="#"><img id="forward8" src="images/forward_blue.png" /></a>
            </div>
        </div><!-- end kolom8 -->

CSS:

/* KOLOM 8 */
#kolom8 {
    width: 1440 px;
    height: 185px;
}
#kolom8 h2 {
    margin-bottom: 38px;
}
#nav8 li {
  cursor: pointer;
  margin: 0;
  width: 750px;
  height: 30px;
  line-height: 50px;
  text-align: center;
  list-style-type: none;
  letter-spacing: 4px;
}
#nav8 a {
  color: #7b7979;
  font-size: 25px;
  text-decoration: overline;
  display: inline;

}
span.underlined 
{
  border-bottom: 1px solid black;
}
span.singleunderline 
{
  border-bottom: 1px dashed black;
}
/* KOLOM 8 */

Answer 1

You can use display: inline in li elements. Additional you can use text-align: center to div container:

 /* KOLOM 8 */ #kolom8 { width: 1440 px; height: 185px; } #kolom8 h2 { margin-bottom: 38px; } #nav8 { text-align: center; } #nav8 li { cursor: pointer; margin: 0; /*width: 750px;*/ height: 30px; line-height: 50px; text-align: center; list-style-type: none; letter-spacing: 4px; display: inline; } #nav8 a { color: #7b7979; font-size: 25px; text-decoration: overline; display: inline; } span.underlined { border-bottom: 1px solid black; } span.singleunderline { border-bottom: 1px dashed black; } /* KOLOM 8 */ 

 <div id="kolom8"> <h2>Partners</h2> <div id="nav8"> <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a> </li> <li class="active"><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a> </li> <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a> </li> <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a> </li> <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a> </li> </div> <div id="slider8"> <a href="#"> <img id="back8" src="images/back.png" /> </a> <a href="#"> <img id="forward8" src="images/forward_blue.png" /> </a> </div> </div> <!-- end kolom8 -->