HTML

Question

我正在尝试在我的网站中实现flexisel滑块。所以我试图将我的li元素排成一行，即使有太多不适合一行（这是滑块的点，它会将它们滑入视图）。现在，图像会换行，所以当滑块滑动时，实际上没有任何东西在右边，其他图像在它下面。

这是我的HTML - 这里没什么特别的。

<div id="abovedees">
    <div id="flexiselcontainer">
        <ul id="slider">
            <li><%= image_tag('/images/headerimage1.png')%></li>
            <li><%= image_tag('/images/headerimage2.png')%></li>
            <li><%= image_tag('/images/headerimage3.png')%></li>
            <li><%= image_tag('/images/headerimage4.png')%></li>
            <li><%= image_tag('/images/headerimage5.png')%></li>
            <li><%= image_tag('/images/headerimage2.png')%></li>
            <li><%= image_tag('/images/headerimage3.png')%></li>
            <li><%= image_tag('/images/headerimage4.png')%></li>
            <li><%= image_tag('/images/headerimage5.png')%></li>
            <li><%= image_tag('/images/headerimage5.png')%></li>
            <li><%= image_tag('/images/headerimage2.png')%></li>
            <li><%= image_tag('/images/headerimage3.png')%></li>
            <li><%= image_tag('/images/headerimage4.png')%></li>
            <li><%= image_tag('/images/headerimage5.png')%></li>
        </ul>
    </div> 
</div>

和我的CSS

#flexiselcontainer ul {
    height:200px;
    width:100% !important;
    overflow:hidden;
    display:inline-block;
} 

li {
    display:inline-block;
    white-space: nowrap;
}

.nbs-flexisel-container {
    position:relative;
    max-width:100%;
}

.nbs-flexisel-ul {
    position:relative;
    width:99999px;
    margin:0px;
    padding:0px;
    list-style-type:none;   
    text-align:center;  
}

.nbs-flexisel-inner {
    overflow:hidden;
    float:left;
    width:100%;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;  
}

.nbs-flexisel-item {
    float:left;
    margin:0px;
    padding:0px;
    cursor:pointer;
    position:relative;
    line-height:0px;
    white-space: nowrap;
    display:inline-block;
}
.nbs-flexisel-item img {
    width: 100%;
    cursor: pointer;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width:188px;
    max-height:188px;
    white-space: nowrap;
    display:inline;
}

如您所见，我尝试了显示：inline-block;和白色空间：现在比我应该拥有更多的地方，但仍然没有得到我需要的结果。图像仍会溢出到下一行。

让我知道我做错了什么。我很感激帮助！

编辑：一直在玩花车：无济于事......

谢谢你们！专利

Answer 1

你有更多的CSS然后你在html中使用（例如没有.nbs-flexisel-ul类），所以我有点困惑，但至少让我为你提供为您想要的最小化设置。只需将其复制并逐一添加所需的所有内容即可。

HTML

<ul>
    <li><div class="block"></div></li>
    <li><div class="block"></div></li>
    <li><div class="block"></div></li>
    <li><div class="block"></div></li>
    <li><div class="block"></div></li>
    <li><div class="block"></div></li>
    <li><div class="block"></div></li>
    <li><div class="block"></div></li>
    <li><div class="block"></div></li>
    <li><div class="block"></div></li>
</ul>

CSS

ul{
    list-style:none;
    white-space:nowrap;
    overflow:auto;
}
li{
    display:inline-block;
}
.block{
    width:300px;
    height:300px;
    margin:10px;
    background:black;
}

和see it in action的JSFiddle链接。

Flexisel强制<li>到一行，而不是显示：inline-block或whites-space：nowrap </li>

1 个答案:

HTML

CSS