Pokúšate sa vynútiť DIV, aby mal vodorovnú posuvnú lištu pomocou CSS - html, css, scrollbar

Snažím sa urobiť div s miniatúramimať nastavenú šírku (330px) a nastavenú výšku (100px) a nastaviť tak, aby bol obsah usporiadaný vodorovne, takže na zobrazenie obsahu sa použije vodorovná posuvná lišta.

Prečítajte si riadok miniatúr v pravom dolnom rohu môjho webu: http://stevenlloydarchitecture.co.nz/building.html

Chcem to urobiť tak, aby boli viditeľné iba štyri miniatúry a ostatné posúvajte vodorovne.

Keď sa však snažím určiť šírkuminiatúry sa presunú pod seba (ako je aktuálne zobrazené). Snažil som sa urobiť rodič Div (s id "slider" v mojom príklade) na nastavenie šírky a výšky, a vyskúšal som toľko kombinácií zadania šírky, výšky a prepadu do divov v nádeji, že budeme nútiť horizontálne posúvanie, ale nič nemá pracoval a ja som úplne pni. Vopred ďakujeme za akékoľvek tipy.

odpovede:

Môžete skúsiť nasledujúci css:

#slider  {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}

#thumbset {
width: 550px;// whatever width you want
}

Do. Môžete pridať nasledujúce štýly #slider div získať iba vodorovný posúvač, ktorý sa posúva po obrázkoch. Potom, je to len veľkosť a umiestnenie div, white-space: nowrap Vlastnosť hovorí obrázkom, aby sa zalamovali do ďalších riadkov.

#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}

#thumbset {
overflow: visible;
}

Použite tento kód:

<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here"s a random text .............
</div>

pozrite sa, ako tento kód funguje na tomto husle, je to ľahký spôsob: pridať vodorovný posuvník