Align elements with list-type:outside style to the content border
consistently
I wonder if there exists an easy and solid way to style ul and li elements
so that when using list-style: outside , the li elements lign up with the
content above it, or with the content box in which it is in without
margins or padding.
Condider this: ( http://jsfiddle.net/Um5L9/2/ )
<div id = "container1">
<span>Something</span>
<ul>
<li>
<div>One</div>
<div>Some more text or content here</div>
</li>
<li>
<div>One</div>
<div>Some more text or content here</div>
</li>
<li>
<div>One</div>
<div>Some more text or content here</div>
</li>
</ul>
</div>
body {
margin:20px;
border: 1px solid #333;
}
ul {
list-style: square outside none;
}
The result will be this:
What I want is this:
And it's easy to do by just adding some padding:
ul {
list-style: square outside none;
padding-left:15px;
}
But there has to be a better way surely than setting pixel margins. Maybe
something that would work for all font sizes?
Thanks!
No comments:
Post a Comment