How to align li lists

[newcoder1010]

Hi,

 

I have this html:

<li >llllllllll</li>
<li >llllllllll</li>
<li >llllllllll</li>
<li >llllllllll</li>

I would like to align li to left. When I align using below code, bullets and texts both align to left for 2nd line. If the bullet point requires a second line, how to have it aligned with the text above and not the actual bullet. Please see the image. Can you please help?

.coaching-program li {
    bottom: 5px;
    text-align: left;
}

Edited October 15, 2016 by newcoder1010

[dsonesuk]

That usually happens when text-indent is used instead of padding, also the bottom property requires position: relative, absolute, or fixed before it will work;

[newcoder1010]

I tried this and it looks lot better but I still have some indent issues in different browsers, specially for mobile versions. Some devices show the 2nd line is being more indented than the first line. Please advise. Attached image.

 

.coaching-program li {    list-style-type: disc;    list-style-position: inside;    text-indent: -1.5em;    padding-left: 1em;}

Edited October 16, 2016 by newcoder1010

[dsonesuk]

You will want to remove or disable using text-indent:0; then use padding, padding will exist on all lines no matter how many, and therefore text alignment at text left edge will match equally on all lines.

[newcoder1010]

I am sorry. I am not able to understand your recommendations. Are you saying text-indent should be 0? Then use padding? What should be value of padding? Any sample code please?

Edited October 16, 2016 by newcoder1010

[dsonesuk]

IF text-indent: is causing the problem, it will cause first line of text to move to right, any line following the first will be further to the left beyond the indentation, using text-indent:0; will set it so no indentation occurs. IT should then return to normal with text lining up to padding already present.

[newcoder1010]

.coaching-program li {    list-style-type: disc;    list-style-position: inside;    text-indent: 0;    padding-left: 1em;}

I tried with text indent 0. I did lot of google I can not fix the problem. Some browsers/devices show first and 2nd line aligned correctly some don't. Can you please help me with the code?

 

Should I also rewrite the html?

[dsonesuk]

Usually because different browser use different styling values, you would zero everything, including ul,ol, li elements.

 

ul, ol, li {list-syle-type: none; text-indent: 0; padding: 0; margin: 0;}

 

Then you add required styling, so it will be the same in all browsers.