Question

I have a horizontal <ul> with three to four <li>s The total width of my li items is 100px but ul takes 100% width: I need the UL to take only the space that is required for lis.

Regards

Answer 1

Try adding an inline css:

ul, li {
  display: inline;
}

If you want your ul to have a margin/padding top/bottom and act as an inline element use inline-block.

ul, li {
  display: inline-block;
  *display: inline; // hack that makes inline block work in ie7.
  *zoom: 1; // hack that makes inline block work in ie7.
  float: none; // those elements must not be floated.
}

Instead of using hacks, try this method from Paul Irish:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

ul, li {
  display: inline-block;
}

.ie7 ul, .ie7 li {
  display: inline; 
  zoom: 1; 

}