Horizontal Nav in HTML5

Question

I have to say that I'm new to Stack Overflow and HTML5. My primary language isn't English. Learning something in other language than my mother tongue language is very difficult, and I didn't find any HTML help aside from the basics like 'what is head, how to use paragraphs', so I had to appropriate code that I have found on the internet. I ended up needing a little help with it.

My issue is that I need to transform this vertical menu below to horizontal one.

---

Here is the code for the menu:

 * { margin: 0; padding: 0; } body { background: #333; } ul { background: white; border-top: 6px solid hsl(180, 40%, 60%); width: 200px; margin: 0 auto; font-size: 0; } ul li { list-style-type: none; position: relative; overflow: hidden; font-size: inherit; float: left; } ul li a { font: normal 14px/28px Ubuntu; color: hsl(180, 40%, 40%); display: inline-block; padding: 10px 15px; text-decoration: none; cursor: pointer; user-select: none; position: relative; } .ink { display: block; position: absolute; background: hsl(180, 40%, 80%); border-radius: 100%; transform: scale(0); } .ink.animate { animation: ripple 0.65s linear; } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5); } } 

 <ul> <li><a>23432222</a></li> <li><a>444444</a></li> <li><a>Sample Text</a></li> <li><a>342123443</a></li> </ul> 

I would be thankful for any help, and sorry for posting kinda silly questions, I just didn't know where to find an answer for this.

Answer 1

Below is a working horizontal version of the menu. The main things I did were to change display on your ul and li to inline-block . This makes it so that they line up next to each other instead of on top of each other. Then I removed the width: 200px from the ul (which was causing the li elements to wrap), and set text-align: center on the body to get the menu ul to be centered.

Working Live Demo:

 * { margin: 0; padding: 0; } body { background: #333; text-align: center; } ul { display: inline-block; background: white; border-top: 6px solid hsl(180, 40%, 60%); margin: 0 auto; font-size: 0; } ul li { display: inline-block; position: relative; overflow: hidden; font-size: inherit; } ul li a { font: normal 14px/28px Ubuntu; color: hsl(180, 40%, 40%); display: inline-block; padding: 10px 15px; text-decoration: none; cursor: pointer; user-select: none; position: relative; } .ink { display: block; position: absolute; background: hsl(180, 40%, 80%); border-radius: 100%; transform: scale(0); } .ink.animate { animation: ripple 0.65s linear; } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5); } } 

 <ul> <li><a>23432222</a> </li> <li><a>444444</a> </li> <li><a>Sample Text</a> </li> <li><a>342123443</a> </li> </ul> 

JSFiddle Version: https://jsfiddle.net/wd51zgog/

Answer 2

One simple way to make all the links in-line (horizontal) is to use the CSS attribute display: inline block;

nav li { 
 display: inline-block;
}

The nav is for the nav tags that are used for navigation:

<nav>
    <ul>
      <li><a>23432222</a></li>
      <li><a>444444</a></li>
      <li><a>Sample Text</a></li>
      <li><a>342123443</a></li>
    </ul>
  </nav>