How to make a HTML list appear without the bullets signs using CSS only?
I have an HTML list. The browser should see the list's existence and arrange the elements accordingly, however I don't want it to show a bullet next to each element.开发者_开发百科 That is, a normal list appears like this:
- text A
- text B
- text C
I want my list to appear like this:
text A
text B text C
ul { list-style: none; }
That gets rid of the bullet points. Now you can go ahead and assign styles to space them out like in your example, if that's what you really wanted:
li { padding: 5px 0; }
If you also don't want the list indented after removing the bullets, it will take another bit, like this:
ul {
list-style: none;
margin: 0;
padding: 0;
}
If you dont set both margin and padding to 0, it will either look right in FF or IE, but not both
Use
list-style:none;
in the style for the < ul > tag
Alternatively, you can also use a definition list (dl
, dt
, dd
) without definition terms (dt
elements).
<dl>
<dd>text A</dd>
<dd>text B</dd>
<dd>text C</dd>
</dl>
But semantically I think an unordered list (ul
, li
) suits your particular purpose better :) So go ahead with just a piece of good CSS as explained by Erik.
<ul style="list-style-type:none"></u>
By setting the style type to none the bullets will not show.
list-style-type: upper-roman;
精彩评论