How do I make these links go horizontally and not vertically?

Active3 hr before
Viewed126 times

5 Answers


People are all over the place with their answers..,The <ul> and <li> elements are naturally block level elements... meaning unless a proper width is set, they will take up the entire width of the 'line' they exist on..., Are the "bird sitting on a live wire" answers wrong? ,which will turn your <li> into 'inline' elements--but you lose the versatility of block level elements (custom width/height, floats, etc) thus the more common alternative is to use:

You could use:

li {
   display: inline;

which will turn your <li> into 'inline' elements--but you lose the versatility of block level elements (custom width/height, floats, etc) thus the more common alternative is to use:

li {
   float: left;

And you'll probably want to make sure the padding/margins are set to your aesthetic needs, for example:

li {
   float: left;
   padding: 0;
   margin: 0 0 0 12 px; // 12px left margin, for some breathing room
load more v

If you want to make this navigational unordered list horizontal, you have basically two options:,The current standard in coding menus is unordered lists. It’s not as semantic as a <nav> tag would be, but it’s not that bad. Navigation is, after all, a list of sorts.,Make the list items inline instead of the default block. .li { display: inline; } This will not force breaks after the list items and they will line up horizontally as far as they are able.,If you look at the navigation code, it’s just a div with a bunch of anchor tags — no lists. It was a huge pain to get rid of the unnecessary lists in WordPress. Lists, in the case of navigation, can be a real waste of bandwidth.

If we wrap the menu in a “table” div, we can solve this. If you are familiar with Stu Nicholls from CSSPlay, he uses this all the time on his awesome horizontal menus. Check out the HTML:

<div id="menu-outer">
   <div class="table">
      <ul id="horizontal-list">
         <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li>
         <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li>
         <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li>
         <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li>
load more v

Note: Center aligning has no effect if the width property is not set (or set to 100%).,To just center the text inside an element, use text-align: center;,Another method for aligning elements is to use the float property:,Use the margin property to make sure that the <div> element is center aligned according to its parent element.

.intro {
  width: 200px;
  : ;


<div class="intro">
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Phasellus imperdiet, nulla et dictum interdum,nisi lorem egestas odio,vitae scelerisque enim ligula venenatis dolor.


The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).,This property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus, it also determines the ordering of block-level content.,The CSS that adjusts the directionality of the content looks like this:,The writing-mode property is specified as one of the values listed below. The flow direction in horizontal scripts is also affected by the directionality of that script, either left-to-right (ltr, like English and most other languages) or right-to-left (rtl, like Hebrew or Arabic).

/* Keyword values */
writing - mode: horizontal - tb;
writing - mode: vertical - rl;
writing - mode: vertical - lr;

/* Global values */
writing - mode: inherit;
writing - mode: initial;
writing - mode: revert;
writing - mode: unset;
load more v

I've gone over the CSS Position and Display properties in my previous post. If you're not familiar with those properties,  I recommend checking out those posts before reading this article.,The align-items property can position elements vertically if used together with display: flex.,So in this post, I will be showing some of the most common ways to center an image both vertically and horizontally using different CSS properties.,Another method for vertical alignment is by using the position and transform properties together. This one is a bit complicated, so let's do it step by step.

The first way to center an image horizontally is using the text-align property. However, this method only works if the image is inside a block-level container such as a <div>:

  div {
    text-align: center;

  <img src="your-image.jpg">
load more v

Other "horizontally-vertically" queries related to "How do I make these links go horizontally and not vertically?"