March 15, 2012
Display a list inline
Question by Startup Crazy
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
Answer by Madara Uchiha
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>
