CODEWITHSUNDEEP
csshtml-lists
mustapha george
mustapha george

Reputation: 621

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 bullet on each line.

Yes I know it is strange request.

Upvotes: 4

Views: 9740

Answers (7)

user8657661
user8657661

Reputation: 31

In my case all I needed was the below code: 

style='margin-top: 1px;'

Upvotes: 0

csswizardry
csswizardry

Reputation: 591

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

Upvotes: 1

Stryder
Stryder

Reputation: 1421

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...

Upvotes: 0

jribeiro
jribeiro

Reputation: 3463

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

Upvotes: 0

punkrockbuddyholly
punkrockbuddyholly

Reputation: 9794

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

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

Upvotes: 0

thirtydot
thirtydot

Reputation: 228202

Try this:

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

Upvotes: 2

dougajmcdonald
dougajmcdonald

Reputation: 20057

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.

Upvotes: 5

Related Questions