What CSS is behind the List Item (LI) in an Unordered List (UL) that
makes the bullet hang out AND makes the text just after the bullet
line up with the text below it?
What I'm playing with right now is....
div.parent {
margin-left: 20px;
}
div.parent>div {
padding-left: 1em;
text-indent: -1em;
}
div.parent>div::before {
content: "\00BB\0009";
/* 00BB is unicode for the >> symbol, and 9 is the tab
char */
}
But is the tab always going to be the same distance? I think this
needs improvement.
I found on another forum a technique that uses floats to do it. But
this code is very bulky. But maybe this is the best way? Can anyone
shed some light on it....
#hangtext {padding-left: 2em;}
#hangtext p {position: relative;}
#hangtext p span {
display: block;
position: absolute;
left: -2em;
}
<div id="hangtext">
<p><span>1:</span>blah, blah, blah</p>
<p><span>2:</span>blah, blah, blah and more blah blah blah and even more
blah blah blah and yet more blah blah blah to make the
paragraph wrap..</p>
<ul>
<li>then you can use lists inside it</li>
<li>if you want to</li>
</ul>
<p><span>3:</span> as long as the text remains inside the hangtext div</p>
</div>
<!-- code above from: http://www.webmasterworld.com/forum83/1764.htm -->
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
