HTML and CSS Reference
In-Depth Information
For unordered lists, the following values are supported by most browsers:
none
,
disc
,
circle
,
square
, and
inherit
. Figure 3.16 illustrates the irst four of
these values in two lists. he irst has a
list-style-position
value of
outside
,
and the second has the value
inside
. Example 3.16 contains the HTML and
CSS code that produces Figure 3.16.
Example 3.16: HTML and CSS for two lists with different
list-style
properties
<!DOCTYPE html>
<html>
<head>
<title>Example 3.16</title>
<style type="text/css">
body { padding: 1em; }
ul li { border: 1px #999 solid; padding: .25em; }
lh { font-weight: bold; }
li:before { content: attr(style); }
#l1 { list-style-position: outside; }
#l2 { list-style-position: inside; }
</style>
</head>
<body>
<ul id="l1">
<lh>Outside position</lh>
<li style="list-style-type: none;"></li>
<li style="list-style-type: disc;"></li>
<li style="list-style-type: circle;"></li>
<li style="list-style-type: square;"></li>
</ul>
<ul id="l2">
<lh>Inside position</lh>
<li style="list-style-type: none;"></li>
<li style="list-style-type: disc;"></li>
<li style="list-style-type: circle;"></li>
<li style="list-style-type: square;"></li>
