Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Orientation in list css

Tags:

html

css

<ul id="list">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

this show me:

aaa
bbb
ccc

How can i make:

aaa bbb ccc

what i must add for css?

like image 629
Horn Masgerter Avatar asked Jun 15 '13 10:06

Horn Masgerter


3 Answers

Don't use float, no no. Use inline-block

HTML:

 <ul id="list">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>

CSS:

ul li {
    display:inline-block;
    background-color:#eee;
    list-style-type:none;
    margin-right:-4px;
    padding:10px;
    border-right:1px solid white;
}

Demo: http://jsfiddle.net/QPuTs/1/

If IE7 (put this in your <head> tags)

<!--[if lte IE 7]>
<style>
ul li {
display:inline;
zoom:1;
}
</style>
<![endif]-->

Or alternatively in your external CSS like so:

ul li { display: inline-block; zoom: 1; *display: inline; }
like image 139
adaam Avatar answered Oct 16 '22 18:10

adaam


You can use display:inline

#list li {
   display:inline;
}

http://jsfiddle.net/btBdW/

like image 28
Darren Avatar answered Oct 16 '22 19:10

Darren


Mention float:left in li

#list li{
    list-style-type:none;
    float:left;
}

Working Code

like image 3
Roy Sonasish Avatar answered Oct 16 '22 20:10

Roy Sonasish