html无序列表的图标怎么不脱离文档流

HTML无序列表默认情况下会使用圆点作为列表项的标记，这个标记的样式是由浏览器默认的样式决定的。如果想要让这个标记不脱离文档流，可以设置列表项的`list-style-position`属性为`inside`，这样标记就会在列表项内部显示，而不是在列表项前面显示。

例如，下面的代码会创建一个无序列表，其中每个列表项的标记将会显示在列表项内部：

<ul style="list-style-position: inside;">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

这样，即使你在列表项前面添加一些文本或者其他元素，标记也不会影响它们的布局。

相关问题

html无序列表水平排列

要实现HTML无序列表水平排列，可以使用CSS的display属性和list-style-type属性进行设置。具体步骤如下：

1. 在HTML中创建无序列表ul标签，并添加列表项li标签。

2. 使用CSS的display属性将无序列表设置为行内元素，这样每个列表项就会排列在同一行内。

3. 使用CSS的list-style-type属性将无序列表的符号样式设置为none，这样列表项前面的符号就会消失。

4. 可以使用CSS的margin属性设置列表项之间的间距，也可以使用padding属性设置列表项内部的间距。

示例代码如下：

<style>
    ul {
        list-style-type: none;
        display: inline;
        margin: 0;
        padding: 0;
    }
    li {
        display: inline-block;
        margin-right: 10px;
    }
</style>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

在浏览器中查看效果，就会发现无序列表的每个列表项都水平排列在同一行内。

html无序列表缩进

你可以使用CSS样式来设置无序列表的缩进。具体方法如下：

<ul class="my-list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

.my-list {
  padding-left: 20px; /* 设置左侧缩进为20px */
}

通过设置 `padding-left` 属性可以控制左侧的缩进距离，从而达到调整无序列表样式的目的。