Aligning <Li> Next to Each Other, Not Working

Aligning li next to each other, not working

Add:

float: Left;

to the css class of the li elements of the menu (in this rule):

".menu-left ul li {"

After the "width: 50%"

The float property specifies whether or not a box (an element) should float.
See http://www.w3schools.com/cssref/pr_class_float.asp

how do I open li next to each other?

In your CSS you have a width:50px; set on your ul tag which is stopping your links to align side by side.

Also add

ul li { display:inline;}

As elements are defaulted to display:block

http://jsfiddle.net/V3sTd/1/

make list items get next to each other

I achieved what I was looking for using display: table-cell to the li's and reducing ul's width.

See demo

Putting two ul's next to each other

1 method:
you need 2 div

<div>
    <h4>Website</h4>
     <ul>
     <li>
         <a href=''>Basic</a>
     </li>
     <li>
      <a href=''>Premium</a>
     </li>
   </ul>
 </div>

 <div>
    <h4>Hosting</h4>
      <ul>
           <li>
             <a href=''>Hosting</a>
           </li>
           <li>
            <a href=''>Host a personal site</a>
           </li>
        </ul>
 </div>

Css

div {
  display:inline-block;
  float:left;

}

Example: https://jsfiddle.net/d2q6kbnw/

2nd method, make your h and ul tag into inline tag using css...

display:inline-block; float:left;

---

Related Topics