html - 带元素符号的一行中的无序列表项

Question

我正在构建一个具有无序列表的响应式页面。我的要求是 li 元素以更大的屏幕分辨率与元素符号显示在一行中:

并在缩小时分解为每行一个要点:

到目前为止，我已经将所有三行无元素符号和三行无元素符号合而为一。当我为较小的屏幕尺寸获得元素符号时，我不会为更大的屏幕排成一行。我不确定我哪里出错了。我猜我在 list-style-type 设置中遗漏了一些东西。

HTML

<div>

<ul class="list">
    <li>Text of line 1 Text of line 1 Text of line 1 Text of line 1 Text of line 1 </li>
    <li>Text of line 2 Text of line 2 Text of line 1 Text of line 2 Text of line 2  </li>
    <li>Text of line 3 Text of line 3 Text of line 1 Text of line 3 Text of line 3 </li>
</ul>

</div>

CSS

.list li {
  display: inline;
  list-style: none;
}

@media screen and (max-width: 600px) {
  .list{
     display: block;
     list-style: circle;
  }
}

fiddle 链接:http://jsfiddle.net/ug5k3k15/

Answer 1

首先请注意，您应该在 @media 规则中使用 .list li 选择器来定位列表项。

此外 - 正如我在 my comment 中提到的- 由于您正在将 li 元素的显示类型更改为 inline 或 block，list-item 将没有逗留影响元素:

12.5.1 Lists: the 'list-style-type', 'list-style',... properties

list-style Applies to: elements with display: list-item

一种选择是改用 CSS float，如下所示:

EXAMPLE HERE (查看演示以了解更多详细信息，包括 clearfix)

.list li {
    float: left;
    list-style-position: inside;
    list-style-type: disc;
    margin-right: 1em;
}

@media screen and (max-width: 600px) {
    .list li {
        float: none;
        list-style-position: outside;
        margin: 0;
    }
}