Html 比窗口大的可伸缩div

概念

我试图得到一个比窗口大的列表，它将根据鼠标位置移动。目标是允许用户查看所有列表条目，无论其数量如何

下面是一张简单的图片来说明这个概念：

• 黑框是窗户
• 黑色箭头是鼠标的位置
• 红线就是清单

问题

目前，只有在设置列表宽度时，我才能使其工作。我想不设置此宽度

代码如下：

$（文档）.ready（函数（）{
var widthPage=$（'.strip'）.width（）；
var widthStrip=$（'.strip ul'）.width（）；
$（'.strip'）。on（'mousemove'，函数（事件）{
var offset=$（this.offset（）；
var relX=event.pageX-offset.left；
var left=relX*（宽度带-宽度页）/宽度页；
$（this.find（'ul'）.css（'left'，'-'+left+'px'）；
});
});
/*定位*/
.脱衣舞{
位置：相对位置；
溢出：隐藏；
}
.带ul{
位置：绝对位置；
顶部：0；左侧：0；
宽度：1750px；
}
李先生{
显示：块；
浮动：左；
}
/*风格*/
身体{
填充：0；
保证金：0；
}
.脱衣舞{
高度：30px；
边缘顶部：50px；
}
.带ul{
高度：30px；
填充：0；
保证金：0；
}
李先生{
列表样式：无；
边框：1px实心#ebebebeb；
右边距：-1px；
填充：0 5px；
线高：28px；
}


洛勒姆
Ipsum
多洛
坐着
艾米特
圣骑士
阿迪皮西奇
精英
塞德
做
埃乌斯莫德
临时的
因奇登特
Ut
劳尔
Et
多洛尔
麦格纳
阿利夸
Ut
埃尼姆
广告
极小值
维尼安
奎斯
诺斯特鲁德
实习
乌拉姆科
拉伯里斯
尼西
Ut
阿利基普
前
Ea
康茂多
康塞奎特

这里的问题是，要强制浮动元素扩展到页面宽度之外，您需要强制其容器的宽度足以容纳所有元素。我建议改用
display:inline block
，因为只要它们的容器指定
white space:nowrap
，它们就会继续

.strip {
    position:relative;
    white-space: nowrap;
    overflow: hidden;
}
.strip ul {
    position: absolute;
    top: 0; left: 0;
    font-size: 0; /* prevent html whitespace from displaying */
}
.strip li {
    display: inline-block;
    font-size: 16px; /* reset font size so the elements appear */
}

设置这些样式后，.
一种方法是将
.strip
设置得非常大，并将
widthPage
更改为祖父母的宽度，祖父母的宽度与原始父母的宽度相等，在这种情况下
var widthPage=window.innerWidth


更改CSS

body { overflow-x: hidden; }
.strip {
    position:relative;  
    overflow: hidden;
    width:10000px; /* Arbitrary large value */
}
.strip ul {
    position: absolute;
    top: 0; left: 0;
    width: auto;
}

谢谢你的工作选择。完整的CSS解决方案得到了我的青睐，但无论如何+1。当然，我同意。但是，如果出于某些奇怪的原因需要保留
display:block
，或者保留空白，那么这将是唯一可行的方法。。。我考虑了所有这些问题，尝试了它们，但没有正常工作。。。不知道我哪里出错了。。当我用
内联块替换
float
时，我可能没有nowrapgj@GiovanniSilveira可能如果没有
空白：nowrap
，
内联块
元素将像浮动元素一样简单地缠绕，而不是从它们的容器中断裂。是的，我知道。。。我只是在我的东西上按ctrl-z来尝试不同的东西。。。我确信我两个都试过了，我想我可能回去太多了，把它拿走了。。。要么是这样，要么是我在那里尝试了一些额外的废话，把事情搞砸了：）