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 switch css property according to some condition

    Website elements go haywire when the user zooms in or out. How do I keep them from moving?

    How to create a pop up animation with a modal using css?

    How can I make the ul contain li in its content box?

    How can I make images fit into a 200 pixel square box using CSS?

    How to sharpen an image in CSS?

    How do you maintain CSS layout when adding content (ASP.NET)

    How do I filter unwanted CS styles from CS sheet?

    Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

    How to add this element in jquery

    How to center items inside isotope container?

    How to use CSS for mobile in the right way?

    how to give margin between li using css?

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    How do I add a horizontal submenu?

    How to remove property from a child element?

    How to change asp:DropDownList extended background color ? CSS class

    How do I use CSS and JS files within a HTML file being sent with Express?

    How to position this using only CSS and no tables

    How to dynamically change CSS style attribute of DIV tag?

    How to filter HTML elements based on their css attribute values ? [closed]

    How to reset input element style

    How to make this inner div vertically centered? (Using CSS)

    How to get the “declared” CSS value, not the computed CSS value

    How to set border between two products in css?

    How to link another page using button? [closed]

    How to disable auto genrated css in media folder at runtime Magento?

    How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery

    How to php echo content into
    classes dynamicaly [closed]

    how to link stylesheet in css