-1

While working with <ul> <li> tag, I've encountered basic issue.

Here is the screenshot causing problem. enter image description here

Here is the ideal format I want. enter image description here

I think I can just control this by using <li> tag CSS property.

Josh Thomas
  • 1,607
  • 2
  • 8
  • 22
  • It would be best to provide us with the concrete code example so we are able to help you directly on that. – Isman F. Feb 10 '21 at 19:33

2 Answers2

2

Instead of including your tag in each li, you can set the bullet style with list-style-type. Setting the value lower-alpha will bullet your list items with lowercase letters. Since the bullets are being styled, the lines will maintain their original wrapping and indentation styles.

.ul-alpha li {
  list-style-type: lower-alpha;
}
<ul>
  <li>a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>b. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>c. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>d. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
</ul>

<ul class="ul-alpha">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
</ul>
D M
  • 5,769
  • 4
  • 12
  • 27
2

Instead of using list-style-position: inside; you might need to play with the padding-left value.
I also used <ol> instead of <ul> here as in your example you have an ordered list

ol {
  padding-left: 0;
}

.list-1 {
  list-style-position: inside;
}

.list-2 {
  padding-left: 16px;
}
<ol class="list-1">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>

<ol class="list-2">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>
Isman F.
  • 759
  • 2
  • 13