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

Question

In HTML unordered lists ( ul), how can I set the distance between markers and elements to make it normal (that is, like all other similar defaults for 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>

Run codeHide result

Answer 1

As I see it, you can use something like this :beforeand add your own specific content (for example, •) to create the illusion of setting the length.

Otherwise, I see no way to do what you ask.

[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>

Run codeHide result

Answer 2

, ul list-style-position: inside , , .

ul , , list-style-position, :

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>

Hide result

, ul s, (, - ).

!

Answer 3

.

( ), / - , ,, li span s: ( , - , , , ).

, ul position:inside, ( ) .

.

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>

Hide result