为何ul设置display:inline后文本偏移且项目符号消失？

相关代码 #

CSS代码 #

ul{
    display: inline;
}

HTML代码 #

<ul>hi
    <li>
        1234
    </li>
    <li>
       5678
    </li>
 </ul>   
     
<ul>hello
    <li>
       abcdef
    </li>
    <li>
       ghijkl
    </li>
 </ul>

现象原因分析 #

1. ul内文本（hi、hello）向右偏移 #

浏览器默认会给块级的<ul>设置padding-left（通常约40px），用来给<li>的项目符号预留显示空间。当将<ul>设置为display: inline后，它转为行内元素，但这个默认的padding-left并未被清除。而hi、hello是直接属于<ul>的文本节点，并非<li>的子元素，因此会被<ul>的padding-left直接推挤，产生向右偏移的效果。

默认块级状态下，<ul>占据整行宽度，文本的偏移被整体布局掩盖，所以视觉上看不到偏移。

2. 列表圆形项目符号消失 #

<li>的圆形项目符号是浏览器默认生成的标记（marker），它的正常渲染依赖于父元素<ul>的列表布局上下文。当把<ul>设置为display: inline后，<ul>失去了块级列表的布局特性，<li>的标记无法在这种行内容器中正常显示，因此项目符号会消失。

如果想同时实现<ul>行内排列且保留项目符号，可以将display属性改为inline-block，这样既保持行内排列的特性，又能保留列表的布局规则。

内容的提问来源于stack exchange，提问作者Michael36