Question

在HTML无序列表（https://business.lynchburgchamber.org）中，如何设置标记和项目之间的距离，以使其正常（即，所有其他类似的默认距离有序和无序列表）？

ul

Answer 1

我看到它的方式你可以使用类似:before的东西并添加你的特定内容（如•）来创建设置长度的错觉。

否则，我不会看到一种做你正在问的方式。

＆＃13;

[style="list-style-position:inside;"] li{
  list-style:none;
}

[style="list-style-position:inside;"] li:before{
  content: '•';
  margin-right: 7px; //Optional and adjustable
}

＆＃13;

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

＆＃13;

Answer 2

我想ul list-style-position: inside左边的额外空格是装饰它的方式与默认定位的空格不同。

为了对抗此问题并使所有ul在样式上看起来都相同，无论list-style-position给出了什么，您可能需要遵循以下内容：

＆＃13;

ul li {
  position: relative;
  display: block;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "\2022";
}

＆＃13;

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

＆＃13;

但是，再次，如果你考虑嵌套ul，你需要多考虑一下（可能必须给每个级别不同的子弹和类似的东西）。

干杯！

Answer 3

感谢所有人。

正如评论中所述（由Jose Fuentes链接），最快/最简单的解决方案是可能，将li嵌套在span中：这会减少一定数量像素的空间（但这种任意减少并不能保证列表与其他列表一致，因为 - 为了上述一致性的目的 - 你必须减去的数字可能因浏览器和浏览器的不同而明显不同比今天）。

我希望有一种方法可以使ul与position:inside的异常距离均匀，但不必进行减法（随着时间的推移而近似且不可靠，并且与浏览器不同）距离。

再次感谢大家。

＆＃13;

ul.inside {
  list-style-position:inside;
}

 ul.inside span {
  margin-left: -15px;
}

＆＃13;

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

＆＃13;

无序列表：如何设置项目符号和项目之间的距离？

3 个答案: