CODEWITHSUNDEEP
htmlcss
Juri Rudi
Juri Rudi

Reputation: 273

Unordered lists: how can I set the distance between bullets and items?

In HTML unordered lists (ul), how can I set the distance between markers and items, so as to make it normal (that is, as all other similar default distances of ordered and unordered lists)?

<p>Ordered list with "position:inside"</p>
<ol style="list-style-position:inside;">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

<p><b>Unordered list with "position:inside"</b></p>
<ul style="list-style-position:inside;">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>Standard lists (without "position:inside")</p>
<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Upvotes: 4

Views: 1476

Answers (3)

Baldr&#225;ni
Baldr&#225;ni

Reputation: 5640

The way I see it you could use something like :before and add your specific content (like • ) to create the illusion of setting the length.

Otherwise I don't see a way of doing what you're asking.

[style="list-style-position:inside;"] li{
  list-style:none;
}

[style="list-style-position:inside;"] li:before{
  content: '•';
  margin-right: 7px; //Optional and adjustable
}
    <p>Ordered list with "position:inside"</p>
    <ol style="list-style-position:inside;">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ol>

    <p><b>Unordered list with "position:inside"</b></p>
    <ul style="list-style-position:inside;">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>

    <p>Standard lists (without "position:inside")</p>
    <ol>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ol>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>

Upvotes: 3

Juri Rudi
Juri Rudi

Reputation: 273

Thanks to all.

As noted in the comments (link by Jose Fuentes), the quickest/simplest solution is, probably, to nest lis in the spans: this reduces the space of a certain number of pixels (but such arbitrary reduction does not guarantee that the list is consistent with the other lists, because -for the purposes of the aforementioned uniformity- the number you have to subtract may differ from browser to browser and tomorrow than today).

I was hoping there was a way to even out the abnormal distance of ul with position:inside, but without having to do subtraction (approximate and unreliable over time and with the browser) of the same greater distance.

Thank you all again.

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

 ul.inside span {
  margin-left: -15px;
}
<p>Ordered list with "position:inside"</p>
<ol style="list-style-position:inside;">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

<p><b>Unordered list with "position:inside"</b></p>
<ul style="list-style-position:inside;">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p><b>OK Unordered list with "position:inside"</b></p>
<ul class="inside">
  <li><span>A</span></li>
  <li><span>B</span></li>
  <li><span>C</span></li>
</ul>

<p>Standard lists (without "position:inside")</p>
<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Upvotes: 0

Rahul
Rahul

Reputation: 842

I guess the extra space on left for ul with list-style-position: inside is to decorate it differently than the ones with the default positioning.

In order to fight this and make all the ul appear identical in style no matter what list-style-position is given to them, you may want to follow like below:

ul li {
  position: relative;
  display: block;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "\2022";
}
<h3>Unordered list with "position:inside"</h3>
<ul style="list-style-position:inside;">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<h3>Standard lists (without "position:inside")</h3>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

But again, if you consider nested uls, you need to think a bit more about it (may have to give a different bullet each level and something like that).

Cheers!

Upvotes: 0

Related Questions