CODEWITHSUNDEEP
css
user379888
user379888

Reputation:

Display a list inline

I have a code that I tried to display inline all the contents in a list but the first item is displaying in a line and after that all the other items are displayed in other line. I am confused with the problem. Here is my code,

 <ul style="display:inline; list-style-type: none;">

 <li style="background:url("no-color.png") repeat !important; padding:5px; display:inline;"> FEATURED</li>
 <li style="background:none repeat scroll 0 0 rgba(255, 57, 65, 0.9) !important;padding:5px;display:inline;">IPHONE4S </li>
 <li style="background:none repeat scroll 0 0 rgba(255, 103, 57, 0.9) !important;padding:5px;display:inline;">APPLE STOCKS </li> 
 <li style="background:none repeat scroll 0 0 rgba(255, 218, 57, 0.9) !important;padding:5px;display:inline;">IPAD HD </li> 
 <li style="background:none repeat scroll 0 0 rgba(193, 241, 78, 0.9) !important;padding:5px;display:inline;">ITUNES </li> 
 <li style="background:none repeat scroll 0 0 rgba(29, 195, 246, 0.9) !important;padding:5px;display:inline;">STEVE JOBS </li>
 <li style="background:none repeat scroll 0 0 rgba(29, 195, 246, 0.9) !important;padding:5px;display:inline;">ICLOUD</li>

</ul>
</p>

Also, you can see it on jsfiddle.

Please help me out how can I display all in one line. Thanks

Upvotes: 0

Views: 1115

Answers (4)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

You've tried to use the background url("") feature to change the background to an image, but you've forgotten that you are within the style= attribute of HTML, so the first " closes the style element, without ever reaching to the display: inline part.

Changing your quotes to single-quotes ' helps.

<li style="background:url('no-color.png') repeat !important; padding:5px; display:inline;"> FEATURED</li>

Upvotes: 1

TimPetricola
TimPetricola

Reputation: 1491

You have a problems with quotes in your first li. And you probably should put the style on another file: http://jsfiddle.net/JJEZS/

Upvotes: 1

Starx
Starx

Reputation: 78971

It is list item that should be in-lined not the list.

You codes perfects, with a minor update 

ul li { display: inline; }

check a demo

Upvotes: 1

RSM
RSM

Reputation: 15108

I looked at your jsfiddle and solved it. change

<li style="background:url("no-color.png") repeat !important; padding:5px; display:inline;"> FEATURED</li>

to 

<li style="background:url('no-color.png') repeat !important; padding:5px; display:inline;"> FEATURED</li>

check demo

Upvotes: 3

Related Questions