css - unordered list with no hard returns

How can I make unordered list (ul/li) not begin on a new line for each LI. User wants the bullet, but to save space, not show bu开发者_StackOverflowllet on each line.

Yes I know it is strange request.

---

You could use:

li { display: inline; }

To remove the way that li's normally go on a new line. People have used that method in additional to style: none; for CSS based horizontal navigation for quite a while now.

---

Try this:

li {
    float: left;
    margin: 0 15px
}

---

A better method, provided you don't need <IE7 support, would be: http://jsfiddle.net/csswizardry/8czmt/

It's better because display:inline is a lot more predictable than float:left, which would require you to use a clearfix or similar on the <ul>.

H

---

With float:left; and a bit of margin/padding tweaking

http://jsfiddle.net/mrmikemccabe/TZqMy/

---

you can also use:

li {float:left}

or

.ul_class_name li {float : left}

(in case you have more than one ul and want to do this only to this one.

Remember you have to make

<div class="clear"></div>

after closing the ul if you choose this

---

This will do it:

ul { overflow:hidden; list-style-type:none } //clear internal float and remove bullet
li { margin:0 5px; float:left; width:auto; } //ie6 additions are needed as width auto is problemativ

<ul>
  <li>content</li>
  <li>content</li>
  <li>content</li>
</ul>

I prefer using floats, but of course you can use display:inline as well...

---

In my case all I needed was the below code:

style='margin-top: 1px;'