CODEWITHSUNDEEP
htmlcsshtml-listsinline
Learning C
Learning C

Reputation: 689

How do I make this display inline

Can someone help me find the error when I tried to display the list in one line but it didn't do it.

#main-nav ul ul li { display: inline; }

But the text is not displaying line. Please take a look jsfiddle.net/EZJwM

Upvotes: 0

Views: 99

Answers (2)

shareef
shareef

Reputation: 9581

solution to your problem js fiddle demo

i change display:block to display:inline to get it on one line but you have to work it out considering you style design i think for main-nav you should use css classes to avoid intersection on what you exactly want otherwise you will get all so fuzzy

change 1

#main-nav ul li{ display: inline; }

change2

#main-nav a:after { color: #aeaeae; content: attr(data-description); font-size: 11px; font-style: italic; font-weight: 400; display: inline; line-height: 0; margin: 3px 0 -3px; text-transform: lowercase; }

change 3

#main-nav ul ul a { border: 0; border-bottom: 1px solid #252525; border-top: 1px solid #4c4c4c; color: #fff; display: inline; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 11px; letter-spacing: 0; font-weight: 400; padding: 8px 20px !important; text-align: left; text-transform: none; }

Upvotes: 0

Steve Day
Steve Day

Reputation: 417

I changed the 

display: inline

to 

float:left

and got this http://jsfiddle.net/EZJwM/5/

The menu isn't centered but they display in one line.

Upvotes: 1

Related Questions