468,251 Members | 1,391 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,251 developers. It's quick & easy.

want to ignore the width of "phantom" bullets while centering a <ul>

When using {list-style: none} to hide the bullets in a <ul>, the bullets
disappear but they are still accounted-for when positioning text.

Specifically, I have:

<div style='text-align: center'>
<ul style='list-style: none>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

I want the list items to appear so that the *text itself* is centered
within the div, *not* so the
text-plus-the-area-where-the-bullet-would-be is centered within the div.

Any suggestions?

-Jordan
Jul 20 '05 #1
3 2041
On Tue, 06 Jul 2004 15:21:49 -0500, Jordan Peterson
<em***@example.com> wrote:
When using {list-style: none} to hide the bullets in a <ul>, the bullets
disappear but they are still accounted-for when positioning text.

Specifically, I have:

<div style='text-align: center'>
<ul style='list-style: none>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

I want the list items to appear so that the *text itself* is centered
within the div, *not* so the
text-plus-the-area-where-the-bullet-would-be is centered within the div.

Any suggestions?


This kind of thing has served me well for making lists appear as
"normal text":

ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}

Setting the margins and padding seems to set all of the common
browsers I've tried straight. You can use values other than zero if
you like; the important thing is that there's some kind of setting
there to override the margin-left and padding-left that different
browsers use to make the "bullet space".

Good luck,
-Claire
Jul 20 '05 #2
Claire Tucker wrote:
This kind of thing has served me well for making lists appear as
"normal text":

ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}


Seems too simple, but sure enough, it works. I had tried setting
margins but was not setting the padding (no reason to, or so I thought).

Thanks much!
Jul 20 '05 #3
Jordan Peterson wrote:
Claire Tucker wrote:
li {
margin: 0;
padding: 0;
}


Seems too simple, but sure enough, it works. I had tried setting
margins but was not setting the padding (no reason to, or so I thought).


Some browsers use a left margin to create space for the marker, others
use left padding.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.