2

A regular list

This is a regular list that serves as the basis of my question.

div {
  background: lightgreen;
  width: 15em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>

The font-size is blown up to 2em so that we can clearly see additional unwanted space around the bullet points in proposed solutions.

Setting left-padding to 0 does not solve it completely

I want to align the discs (the bullets) of the list with the left edge of the div element. So I try something like this.

div {
  background: lightgreen;
  width: 15em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
}

ul {
  padding-left: 0;
  list-style-position: inside;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>

This solution would have been nice if the indentation of the wrapped lines were not lost. I still want the wrapped lines to be aligned with the beginning of the first character of the first line like they are in a regular list.

Setting left-padding to 1em does not solve it completely

This is one of the solutions proposed in the answers but this does not work as well. We can see additional horizontal space between the left edge of the DIV and the bullet-point discs.

div {
  background: lightgreen;
  width: 20em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
}

ul {
  padding-left: 1em;
}
<div>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus
      porttitor.</li>
    <li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
    <li>Nulla id</li>
    <li>Nam ut</li>
  </ul>
</div>

Question

What is the right way to solve this problem?

Lone Learner
  • 18,088
  • 20
  • 102
  • 200
  • Downvoters, could you please offer some feedback about how this question may be improved? – Lone Learner Aug 13 '18 at 13:08
  • Lone Learner, would you like to write a feedback to my answer below, please. – Bharata Aug 15 '18 at 16:55
  • @LoneLearner, build your own bullet points using tag..It is the best solution and anytime you can customize it's gaps as well as it's appearance such as squares, triangle etc. Try my solution below. – VSM Aug 17 '18 at 07:30

6 Answers6

5

You can create your own bullet and you will be able to easily control size and distance:

div {
  background: lightgreen;
  margin-left:20px;
  font-size: 2em;
}
ul {
 list-style:none;
 padding:0;
}
li {
  display:flex;
}
li:before {
  content:"";
  width:0.4em;
  height:0.4em;
  border-radius:50%;
  background:#000;
  margin-right:0.5em;
  margin-top:0.4em;
  flex-shrink:0;
}
body {
 background:pink;
}
<div>
  <ul>
    <li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique</li>
    <li>Nulla id</li>
    <li>Nam ut</li>
  </ul>
</div>
<div style="font-size: 1em;">
  <ul>
    <li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique</li>
    <li>Nulla id</li>
    <li>Nam ut</li>
  </ul>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

You have to add to your second example margin-left: 0.84em; and list-style-position: outside; and you will have what you need:

div {
  background: lightgreen;
  width: 15em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
}

ul {
  padding-left: 0;
  margin-left: 0.84em;
  list-style-position: outside;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
Bharata
  • 13,509
  • 6
  • 36
  • 50
0

div {
  background: lightgreen;
  width: 15em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
}
div ul {
  list-style:none;
}
div ul li {
  
}
div ul li .disc {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #000;
  margin-right: 10px;
}
<div>
<ul>
<li><span class="disc"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li><span class="disc"></span>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li><span class="disc"></span>Nulla id</li>
<li><span class="disc"></span>Nam ut</li>
</ul>
</div>

https://jsfiddle.net/Sampath_Madhuranga/4wv7kuep/5/

Use your own styles to show bullet points..That is the best solution for this issue...

Try this snippet..This may works for you. Thanks.

VSM
  • 1,765
  • 8
  • 18
0

There are different ways. Check the https://css-tricks.com/almanac/properties/l/list-style/ which shows you can order the list 'list-style-position' property.

Otherwise we can use the symbols or any icons or images look at this link "Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image" which gives complete descruption of listview alignment.

In general it will add before property to the li, we can write our own.Please let me know if anything required

Arun
  • 1,177
  • 9
  • 15
0

You can also try using background-images, with minimal css, it works exactly the same way as pseudo :before and :after as said by others earlier. This would also give you tight control over the size of the bullet. please have a look at the below snippet :)

div {
  background: lightgreen;
  width: 15em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul li {
  padding-left: 1em;
  background: url("https://via.placeholder.com/10.png/000/000") no-repeat left .5em / .25em;
}
<div>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit
      amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque,
      quis dictum metus porttitor.</li>
    <li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc,
      eget scelerisque elit sem vitae nulla.</li>
    <li>Nulla id</li>
    <li>Nam ut</li>
  </ul>
</div>
<br>
<br>
<div style="font-size: 1em">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit
      amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque,
      quis dictum metus porttitor.</li>
    <li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc,
      eget scelerisque elit sem vitae nulla.</li>
    <li>Nulla id</li>
    <li>Nam ut</li>
  </ul>
</div>
Girisha C
  • 1,922
  • 1
  • 12
  • 20
-2
div {
  background: lightgreen;
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}

div ul{
  padding-left:0;
  list-style-position: outside;
}
div ul li{
  margin-left:20px;
}

Try this CSS instead.

Alvin Ching
  • 25
  • 1
  • 7