CSS to recreate LI with bullet, but without using a LI
Question
I'm trying to create a layout that looks like a LI with a bullet, but that doesn't use a LI. I can't use a LI because I want to allow different items in the same list to have different bullet images. And from what I can tell LI bullet styles can only be set in the UL, so all LI in the same UL must have the same bullet image... and I don't want that. Please correct me if I am wrong about how LI's can be styled.
Here's the HTML that I'm trying to style so that it recreates a LI bullet.
<div><img src="..."/><p>Inbox:</p></div>
I'm not sure how best to achieve the following goals:
- Make bullet image display to the left of the item text box so that when there is lots of text the bullet hangs off in the left margin. The text shouldn't wrap under the bullet image.
- Keep the bullet image aligned middle with the first line of text (in the case of text wrapping). And keep the bullet middle aligned when the text changes size.
My high level goal is to recreate TaskPaper's UI in a web page:
I'll be happy to give a free license to the person with the solution that I like best.
Thanks,
Jesse
5 answers
solution1
5 ACCPTED 2009-07-14 04:18:18
You can use CSS classes to do that:
<HTML>
<HEAD>
<STYLE>
LI.circle { list-style: circle }
LI.square { list-style: square }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="circle">Circle</LI>
<LI class="square">Square</LI>
<LI>Third</LI>
</BODY>
</HTML>
And if you need an arbitrary image, go like LI.whatever { list-style: url(myimage.png) }
solution2
1 2012-04-23 17:02:31
@Dels -- Your example using LIs with IMGs inside would actually work because you're still using the LI element in front of each image. The effect would be something like
- <\\img> stuff
- <\\diff img> more stuff
You'd still have the regular bullet style, but with an image beside it. I think you were trying to cover that with the image by margin-ing it, but if that would work, which I'm not even confident about, I believe you'd have to use a negative left margin.
solution3
1 2009-07-14 04:17:20
you could use span as alternative
<span><img src="">text</img></span>
or you could use default ul but with different images for each li
<ul>
<li><img src="image1">text1</img></li>
<li><img src="image2">text2</img></li>
</ul>
then align the margin of each image on li using css
li img{margin-left: 5px}
yeah something like that
solution4
1 2009-07-14 04:31:26
You also can use list-style-type: none; and then use background image
solution5
1 2012-02-21 20:45:49
If you do not want to make a list and need to put bullets in a link you can make it like this:
<a id="bulletlink" href="">hey</a>
the css would look like this:
bulletlink{
background-image:url(../some/bullet.png) 0px 6px no-repeat;
padding-left:10px;
}
The image is a simple black circle of 8px by 8px with a transparent background and you give the anchor or text a padding so it does not overlap the bullet. You obviously can do this for pretty much anything including divs, images, text, headers, etc... you just need to be able to put a background-image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.