Question

我尝试制作一个滑块，但遇到问题，将所有div标记放在一行中。我怎么做？以及#slider_content的自动宽度如何？

<div style="width: 100px; height: 20px; background: #FFA; overflow:hidden">
        <div id="slider_content">
            <div style="width:50px; height: 50px; background: #ccc; float:left">1</div>
            <div style="width:50px; height: 50px; background: #faa; float:left">2</div>
            <div style="width:50px; height: 50px; background: #ccc; float:left">3</div>
            <div style="width:50px; height: 50px; background: #faa; float:left">4</div>
            <div style="width:50px; height: 50px; background: #ccc; float:left">5</div>
            <div style="width:50px; height: 50px; background: #faa; float:left">6</div>
        </div>
    </div>

Answer 1

最外面的DIV的宽度太窄 - 将其增加到至少300px。或者，将最里面的DIV的宽度设置为总＆lt; = 100％的百分比，然后将slider_content设置为宽度为100％。 e.g。

<div style="width: 100px; height: 20px; background: #FFA; overflow:hidden">
    <div id="slider_content" style="width: 100%">
        <div style="width:15%; height: 50px; background: #ccc; float:left">1</div>
        <div style="width:15%; height: 50px; background: #faa; float:left">2</div>
        <div style="width:15%; height: 50px; background: #ccc; float:left">3</div>
        <div style="width:15%; height: 50px; background: #faa; float:left">4</div>
        <div style="width:15%; height: 50px; background: #ccc; float:left">5</div>
        <div style="width:15%; height: 50px; background: #faa; float:left">6</div>
    </div>
</div>

Answer 2

你真的不需要自动宽度只是设置它高于你需要的！

.slider_content{
width:1000px;
}

一条线放在内溢

2 个答案: