在移动设备上将页面列表动态显示为一行

Question

我有一个锚元素列表(它是页面底部的一个页面导航器)。在移动端，列表被换成两行。为了便于移动使用，我希望将其保持在一行，并且只显示适合屏幕大小的页码。我不想做whitespace: nowrap;或overflow-x: scroll --我想让尽可能多的元素显示在一行上，而不是滚动或消失在水平的以太中。

我想我应该用jQuery来决定窗口的宽度，如果列表的整体宽度超过了屏幕的宽度，那么只显示活动页面div两侧适合一行大小的元素。有没有“选择一定数量的兄弟姐妹”这样的东西？

我知道jQuery中存在.siblings()以及CSS同级选择器，但它们要么选择所有同级，要么只选择一个紧邻的同级。我想根据屏幕大小动态选择活动元素(页面)两侧的同级元素。

Answer 1

没有任何代码，就很难确切地知道你在做什么。但我会使用whitespace: nowrap;，以便元素尽可能地宽，然后您可以遍历它们，将它们的宽度与视口或容器的宽度进行比较，并有选择地隐藏它们。(或者，默认情况下使用opacity: 0;或visibility: hidden;将其隐藏，仅显示宽度小于容器/视口的对象)。如下所示：

var cw = $('.container').width();
$('footer li').each(function() {
  if ($(this).width() > cw) {
    $(this).addClass('hidden');
  } 
});

Answer 2

您可以将每个元素的宽度设置为窗口宽度/项目数

var numberOfAnchors=$("a").length;
$("a").css("width",$(window).width()/numberOfAnchors+"px");

但要确保锚点显示与display:inline不同