Question

我有一个锚元素列表（它是页面底部的页面导航器）。在移动设备上，列表包含两行。我想将它保持在一行以便于移动使用，并且只显示适合屏幕的页码。我不想做whitespace: nowrap;或overflow-x: scroll - 我希望尽可能多的元素显示在一行上，而不会滚动或消失在水平以太网中。

我在想我用jQuery确定窗口宽度，如果整个列表的宽度超过了屏幕的宽度，只显示活动页面div的两侧的元素在一条线上。是否有这样的事情＆＃34;选择一定数量的兄弟姐妹＆＃34;？

我知道.siblings（）存在于jQuery以及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

不同

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

2 个答案: