css display的几种展现形式而display: list-item;就是用来将span元素变成li形式的。如果

属性列表

属性	说明
inline	把元素变成行级元素。
block	把元素变成块级元素。
none	此元素不会被显示。
inline-block	行内块元素。
list-item	此元素会作为列表显示。(像ul下的li)

1.inline

html代码

    <div>
        <p>我本来是一个块级元素</p>
        <p>我本来应该在第二行的</p>
    </div>

css 代码

    p {
        display: inline;
    }

效果：

如果没有 display: inline; 效果会是以下样式：

2.list-item;

html

  <div class="content">
    <span class="child">
      list-item
    </span>
    <span class="child">
      list-item
    </span>
    <span class="child">
      list-item
    </span>
    <span class="child">
      list-item
    </span>
  </div>

css

    .content {
      background: green;
      width: 1200px;
    }
    .child {
      background: red;
      margin: 5px;
      display: list-item;
      list-style:inside square;
    }

效果如下：

这里的 list-style就是用来加列表前的黑点, 而display: list-item;就是用来将span元素变成li形式的。

下面看下不加display: list-item; 的样式

如果不加list-item；span标签就会显示成默认的行级元素。