размещение одной строки внутри переполнения

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 слишком узка - увеличьте его как минимум до 300 пикселей.В качестве альтернативы, установите ширину ваших внутренних DIV в процентах от общего значения <= 100%, затем установите для slider_content ширину 100%.например, </p>

<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;
}