Bullets center with unordered list
Does anyone know the CSS that makes the bullet point sit at the top of a multi-line bulleted list? For some reason with the template that I am using the bullet point centers to the left instead of simply sitting next to the first word if I have more than one line of t开发者_JAVA技巧ext.
Set the list style position to inside the list item, see this demo fiddle.
CSS:
ul {
list-style-position: inside;
}
This is not an answer per-se but it may give others an insight to a similar visual situation with a different set of circumstances.
I had the same issue, like so:
My HTML looked like this:
<ul>
<li>
<a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li>
<a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
<p>Lorem ipsum dolor sit amet.</p>
</li>
</ul>
And the CSS like this:
a {
display: inline-block;
vertical-align: middle;
}
See the offending part? The vertical-align: middle;
declaration.
There are two solutions:
Solution 1
Remove the vertical-align: middle;
declaration altogether.
Solution 2
Change the value: vertical-align: middle;
to vertical-align: top;
.
Result (as expected in the beginning):
Hope this helps.
You could do something like this:
(css)
li div:before
{
background-image:url('bullet.png');
}
(html)
<ul>
<li>
<div>
text<br />
more text
</div>
</li>
</ul>
精彩评论