newcoder1010 Posted October 15, 2016 Share Posted October 15, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 15, 2016 Share Posted October 15, 2016 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; Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 16, 2016 Author Share Posted October 16, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 16, 2016 Share Posted October 16, 2016 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. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 16, 2016 Author Share Posted October 16, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 16, 2016 Share Posted October 16, 2016 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. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 18, 2016 Author Share Posted October 18, 2016 .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? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 18, 2016 Share Posted October 18, 2016 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now