javascript - 允许元素水平漂浮在屏幕外

Question

我在这里有点麻烦，我有 6 个<li>元素集<ul>。这是一个演示。我的目标是让元素从页面右侧溢出，稍后我将使用 javascript 循环浏览它们。出于某种原因，无论我尝试什么，它都会将其他元素向下推。我努力了：

float:left;

display:inline-block;

实际上，每种显示方式，也尝试过clear:both;我也尝试过将列表设置在 div 中并将宽度设置为荒谬的像素宽度，并希望将其正确地推离边缘，但它什么也没做。

有任何想法吗？

我想尽量避免使用 javascript 解决方案，但欢迎一切。

注意：最终这些将超过 20% 的宽度，每个都<li>将跨越屏幕宽度并在 jquery 这么说时移入

Answer 1

您需要将 li 宽度设置为固定宽度而不是 20%，如果您将其作为百分比，那么无论您的容器有多大，li 始终是该宽度的 20%。

还要确保 li 容器有足够大的宽度来容纳你的 li

像这样的东西

http://jsbin.com/eyemaf/1/edit 希望这个链接有效 我通常不使用 jsbin

.bodynavs{
    width:200px;
    min-height:100px;
    border:1px solid green;
}

#slideimages{
    list-style-type:none;
    padding:0;
    margin:0;
    overflow:hidden;
    width: 2000%;
}

Answer 2

您需要尝试更改white-spaceCSS 属性：

white-space: nowrap;

这将导致您的列表元素全部在一行上，按预期离开屏幕，并根据需要滚动。