CABITSS
asked on
adding a hanging indent to a bullet list
How could you add a hanging indent to a bullet list without adding extara leading space?
one way is to use the blockquote tag:
<ul>
<li><blockquote> your content 1 </blockquote></li>
<li><blockquote> your content 2 </blockquote></li>
</ul>
<ul>
<li><blockquote> your content 1 </blockquote></li>
<li><blockquote> your content 2 </blockquote></li>
</ul>
Do you mean something like this?
<table border=0 cellpadding=0 cellspacing=0 width="200">
<tr valign=top>
<td>• </td>
<td>Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 </td>
</tr>
<tr valign=top>
<td>• </td>
<td>Item 2 </td>
</tr>
<tr valign=top>
<td>• </td>
<td>Item 3 </td>
</tr>
</table>
-blake
<table border=0 cellpadding=0 cellspacing=0 width="200">
<tr valign=top>
<td>• </td>
<td>Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 </td>
</tr>
<tr valign=top>
<td>• </td>
<td>Item 2 </td>
</tr>
<tr valign=top>
<td>• </td>
<td>Item 3 </td>
</tr>
</table>
-blake
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
#navcontainer ul li a
{
background: transparent url(../images/bulletNon.gi
text-align: left;
text-indent: 5; //Change this here to create more or less indent.. Can even use negative.
font: bold 9pt arial;
text-decoration: none;
}
</style>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="">Bullet One</a></li>
<li><a href="">Bullet Two</a></li>
<li><a href="">Bullet Three</a></li>
<li><a href="">Bullet Four</a></li>
</ul>
</body>