im trying to achieve something that i thought it was easy, but the reality is cruel. I have a simple list
I'm trying to get the following result: when the text is longer than the available width and the browser wrap it, i want it to go underneath the bullet i.e. applying indent only on the first line, where the bullet is. It seems the list item is rendered as block, so any suggestions?
You can do it on your CSS, by specifying your bullet to be inside list:
Like this
ul{ list-style: disc inside none; } You can test it here
Try the list-style-position: inside; for the <li> element. More info http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position.
Try wrapping your list content in divs like this:
<ul> <li> <div> Item 1 </div> </li> <li> <div> Item 2 </div> </li> </ul> And give your <ul> or containing element a fixed width, or max-width if you're feeling adventurous.
The reason that the text wraps to the right of the bullet is that the browser renders the entire list-item element to the right of the bullet. It will always wrap the text within the element which contains the text.
The simplest solution is to not use the built-in list-item bullets.
Instead create an image of the bullet you like and use float:left to have it in the top left. The text will wrap around it and give you the result you desire.
<style> li { list-style-type:none; } img{ float:left; } </style> <ul> <li><img src='bullet'>my short text</li> <li><img src='bullet'>my very very long text</li> </ul> Some other points: As different browsers differ on the padding and margins of lists, you should set them: (Set to your preferred margin):
ul { padding:0; margin:30px } ul li{ padding:0; margin:0 } Also, it is better to use an element with the background being your preferred bullet:
span.bullet {float:left; height:10px; width:10px; background:url(bullet.gif) no-repeat} Lastly, an even better idea is not to use an image at all - but rather to prefix all your text with a unicode bullet. Or, if your users use a modern browser, prepend the unicode char with CSS. However, I haven't time at the moment to look this up. Praps later today.
