Question

我正在构建一个包含无序列表的响应式页面。我的要求是li项目在一行中显示更大屏幕分辨率的项目符号：

enter image description here

缩小时，每行分解为一个子弹点：

enter image description here

到目前为止，我已经把所有三条线都放在一条没有子弹和三条没有子弹的线上。当我获得较小屏幕尺寸的子弹时，我不会在一行中获得更大的屏幕。我不确定我哪里出错了。我猜我错过了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;
  }
}

小提琴链接：http://jsfiddle.net/ug5k3k15/

Answer 1

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

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

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

list-style适用于：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;
    }
}

Answer 2

因为你的CSS错了。将其更改为：

.list li {
    display: inline;
    list-style: none;
}
@media screen and (max-width: 600px) {
    .list li {
        color:#000;
        list-style-type: disc;
        display:list-item;
    }
}

See fiddle

所有尺码：

.list li {
            color:#000;
            list-style-type: disc;
            display:list-item;
        }

基本上，您的显示块必须更改，您需要将列表样式应用于li element。对于所有尺寸，只需摆脱媒体查询

Answer 3

如果你想让它真正响应，你可以让它在内容不能再水平放置时准确切换到垂直列表（即1,2,3号线全部在一条线上，或在不同的线上）。基本上你只是计算内部和外部宽度，并根据哪个值更大来改变ul的类。无论如何，这里是小提琴和代码。

http://jsfiddle.net/ug5k3k15/10/

function main() {
    var outerWidth = $('ul').width();
    console.log('Outer width is ' + outerWidth);
    var innerWidth = 0;
    $('ul').find('span').each(function(index,value){
        //Stick span in li since li width fills available width (i.e. not actual width)
        //Manually add margin/padding values
        var current = $(value).outerWidth() + 15 + 10;
        innerWidth += current;
        console.log('li['+ index+']\'s width is '+current);
    });
    console.log('Inner width is ' + innerWidth);
    if(innerWidth > outerWidth){
        $('ul').attr('class','verticalList');
        console.log('Content cannot fit in single row!');
    } else {
        console.log('Content fits!');
        $('ul').attr('class','list');
    }
}

PS：使用hackyScrollbarResizeListener（）函数，以便在创建/销毁滚动条时调用窗口调整大小事件;这有助于计算宽度，因为有时候滚动条会在你注意到的情况下弹出和不存在而且会让事情变得混乱。

带有项目符号的一行中的无序列表项

3 个答案: