Geek asks and answers

List only for the first line of the HTML list

im trying to achieve something that i thought was easy but reality is cruel. I have a simple list

  • item 1
  • item 2

I try to get the following result: when the text is longer than the available width, and the browser wraps it, I want it to fall under the mark, that is, it indent only in the first line where the bullet is. It seems the list item appears as a block, so any suggestions?

+3
source share
4 answers

You can do this on your CSS by specifying your bullet inside the list:

Like this

ul{
    list-style: disc inside none;
}

You can test it here.

+8
source

divs :

<ul>
    <li>
        <div>
            Item 1
        </div>
    </li>

    <li>
        <div>
            Item 2
        </div>
    </li>
</ul>

<ul> max-width, .

0

, , , . , .

- .

float: , . .

<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: Since different versions of browsers differ by indentation and list fields, you should install them: (Set to your preferred stock):

ul { padding:0; margin:30px }
ul li{ padding:0; margin:0 }

In addition, it is better to use an element with a background, which is your preferred brand:

span.bullet {float:left; height:10px; width:10px; background:url(bullet.gif) no-repeat}

Finally, an even better idea is not to use the image at all, but rather the prefix of the entire text with a unicode bullet. Or, if your users use a modern browser, add unicode char using CSS. However, I don’t have time to look at it now. Praps later today.

0
source

More articles:


All Articles