How to display text on the same line?


Tags: html,css

Problem :

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: enter image description here

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 */


Solution :

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 -->


    CSS Howto..

    How to align text next to a “div” in HTML/CSS?

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    how can style be added to the first 2 list elements using CSS

    How do I change the overflow of a single element, while having the overflow of the body hidden?

    How to replace fixed values in responsible form css

    How to css 3rd li in hierarchy?

    How to apply css transformations on HTML elements using jQuery?

    How to fill the width under an image with a caption without defining the width of the caption?

    How to use the Xpath and CSS selector in for function

    How to transform a button into this styled button

    How to create a pixel perfect divider using css border [closed]

    How do I display all the data in a MySQL table in a theme? [closed]

    How to truly align center of two elemnts with css?

    CSS check box, how to make an item unchecked only if another one is checked

    How to styling div with CSS fixed width and auto-resize?

    How to remap CSS shortcut key in Mac Bluefish text editor

    How do I add HTML files to a GitHub repo?

    How to add CSS class attribute for Html helper methods in asp.net mvc (VB.NET)?

    wordpress submenu css show on parent active and child active

    How to edit ol tags in rich text editor

    How to insert a line break before an element using CSS

    How can I make this image responsive?

    How to make a css compatible by all browser

    How to recalculate the css url paths when moving it to a different folder

    How to apply CSS to a textbox?

    How to prevent dynamically appended div from overflowing?

    how to put css in selected row in angular js?

    How to create rounded shapes with css or SVG

    How are media queries counted in IE's CSS selectors limit?

    How to change the style of an active menu with php + css