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.
Add a comment
|
7 Answers
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.
1 Comment
dougajmcdonald
Very true both of you, thirtydot's answer is what you're after, I forgot to read fully! sorry :(
Try this:
li {
float: left;
margin: 0 15px
}
Comments
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
Comments
With float:left; and a bit of margin/padding tweaking
Comments
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
1 Comment
jribeiro
yeah and you have to tweak the left padding/margins obviously
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;'
