0

我找到了很棒的 li 滑块http://unslider.com/但我的项目有很多问题。

我尝试将此滑块设置为全屏页面的背景，但我的 li 元素不是窗口的 100% 高度（容器是）。

<body>
    <!--- Always on top --->
    <section class="content">
        <nav>
            <ul>
                <li id="fotograf_pg1_btn">1btn</li>
                <li id="fotograf_pg2_btn">2btn</li>
                <li id="fotograf_pg3_btn">3btn</li>
            </ul>
        </nav>
    </section>

            <!---------------------->

            <!-----as a background ---------->
<div class="unslider">
    <ul>
        <!--------------  Slide fotograf ślubny ------------->
        <li id="fotograf_pg1"> Fotograf zakładka 1</li>
        <!--------------  Slide Fotograf prouktowy ------------->
        <li id="fotograf_pg2"> Fotograf zakładka 2</li>
        <!--------------  Slide Fotograf prouktowy ------------->
        <li id="fotograf_pg3"> Fotograf zakładka 3</li>
    </ul>
</div>
</body>

我混合了各种方法，但仍然没有。jQuery 将解决问题，但如果可能的话，我想使用纯 CSS

    .unslider { position: relative; overflow: hidden; 
    height: auto !important; /
    min-height: 100%; /* ie6 ignores min-height completely */
    height: 100%;
    width:100%;
    background-color: red; /* just for presentational purposes */
    position: absolute; overflow:hidden;
    top:0px;
    z-index:-1;

}


.unslider li { 
    list-style:none;
    display: inline-block;
    height: 100%;
    width:100%;
    }

.unslider ul li { 
    float: left;
    display: inline-block
    height: auto !important; /* ie6 ignores !important, so this will be overridden below */
    min-height: 100%; /* ie6 ignores min-height completely */
    height: 100%;
    width:100%;
}

.unslider ul{ 
    display:block;
    height: 100%;
    width:100%;
}
4

1 回答 1

0

基于百分比的高度实际上不起作用。

这是为什么 % 的高度不起作用的解释 - CSS - 为什么百分比高度不起作用？

您应该尝试特定的高度像素或使用line-height来保持验证。

.unslider ul li { 
    float: left;
    display: inline-block
    height: auto !important; /* ie6 ignores !important, so this will be overridden below */
    line-height: 100px; /* Use this with your desired pixel */
    height: 100%;
    width:100%;
}
于 2013-10-25T15:13:40.980 回答