CODEWITHSUNDEEP
htmlcss
danielreiser
danielreiser

Reputation: 5360

li ul li is too long, line wraps but no indention

I've an unordered HTML list (ul). If the second word is too long the line wraps automatically but the overflowing text isn't indented. Any ideas how to solve that?

Here is the example

Then "Leistungen" and then click on KINDERZAHNHEILKUNDE. Now you see what I mean.

Probably it's because of the css, don't know about that.

Upvotes: 24

Views: 35175

Answers (4)

Irfan
Irfan

Reputation: 69

For my ordered list and the multi line indent I have followed below css

.surveyorderedlist{
        ol{
            list-style-position: outside;
        }
        li{
            margin-bottom:5px;
            margin-left:40px;
            padding-left:8px;
        }
    }

and then your html should be

<div class="surveyorderedlist">
            <span><b>Conditions imposed</b></span>
            <ol>
                <li>Names and addresses are accessed only by the Financial Service Provider on its own behalf, and solely for its own use;</li>
                <li>Names and addresses may only be accessed for a specified purpose;</li>
                <li>The fees charged for the provision of the names and addresses from the Motor Vehicle Register (MVR) are duly paid;</li>
                <li>Any instances of unauthorised access must immediately be notified to the Secretary for Transport and the Privacy Commissioner; </li>
            </ol>
</div>

Upvotes: 2

nickf
nickf

Reputation: 546055

add this CSS:

ul {
    list-style-position: outside;
}

Example here: http://jsbin.com/emeda/

Upvotes: 15

Gausie
Gausie

Reputation: 4359

Replace your indent with padding

padding-left: 2em;
text-indent: -2em;

Should do the trick

Upvotes: 43

Sarfraz
Sarfraz

Reputation: 382696

This is happening because the word Prophylaxe in der Schwangerschaft is too long to fit in that side bar. You need to increase the width of the sidebar containing your list.

The only other solution is to decrease the font size so that even words like above are shown as per width of the sidebar.

EDIT Please let me know if my answers is correct or not as i have some belief of that reason even though someone has -ve marked me; so please let me know if i am wrong by trying it out. thanks

Upvotes: -3

Related Questions