CODEWITHSUNDEEP
htmlcsshtml-lists
user2988642
user2988642

Reputation: 83

nav menu won't line up horizontally

i'm trying to get a horizontal navigation bar, but I can't get it to work right.

http://jsfiddle.net/2fkxx/

nav {
    text-align: center;
}
    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline-block;
    }
        nav ul li {
            display: inline;
        }
            nav ul li a {
                text-decoration: none;
                display: block;
                width: 80px;
            }

Upvotes: 0

Views: 1553

Answers (5)

Ayaz Shah
Ayaz Shah

Reputation: 435

You need float:right on nav ul li visit link 

nav ul li {
     float:left;
     display: inline;
        }

Upvotes: 0

Hoytman
Hoytman

Reputation: 1812

Or you could try using inline-block instead of block

nav ul{
    display: block;
    overflow: hidden;
    margin: 0 auto;
}

nav ul li{
    display: inline-block;
}

Upvotes: 0

Aniruddha Pondhe
Aniruddha Pondhe

Reputation: 1870

Simple solution:

Set 'float:left' for the list element and also do 'display:inline-block'

nav ul li{
   float:left;
   display:inline-block;
}

Let me know if it worked. I have had the same problem recently. I can help you out more.

Upvotes: 0

Colin Bacon
Colin Bacon

Reputation: 15609

Set your li to inline-block rather than inline.

nav ul li {
    display: inline-block;
}

Fiddle

Upvotes: 3

CRABOLO
CRABOLO

Reputation: 8793

FIDDLE

nav ul li {
    float: left;
}

Upvotes: 2

Related Questions