NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Martin Štěpánek
Tvůrce
Avatar
Martin Štěpánek :30.6.2016 23:37

Ahoj,
mám problém s nastylováním položek, u kterých nechci, aby se zalamovaly, ale aby u nich byl posuvník.
HTML:

<div id="vyberUzivatelu">
            <div class="vyberUzivatelu-uzivatel">
            <a href="www.example.com" title="titulek">
            <img class="profil-kruh" src="www.example.com/img.jpg" alt="Náhradní text"><br>
            <span class="trida">Text</span>
            </a>

            </div>
            <div class="vyberUzivatelu-uzivatel">
            <a href="www.example.com" title="titulek">
            <img class="profil-kruh" src="www.example.com/img.jpg" alt="Náhradní text"><br>
            <span class="trida">Text</span>
            </a>

            </div>
            <div class="vyberUzivatelu-uzivatel">
            <a href="www.example.com" title="titulek">
            <img class="profil-kruh" src="www.example.com/img.jpg" alt="Náhradní text"><br>
            <span class="trida">Text</span>
            </a>
            </div>
</div>

Takhle těch divu s třídou vyberUzivatelu-uzivatel mám v divu s id vyberUzivatelu asi 20.
Potřebuji, aby se divi se třídou vyberUzivatelu-uzivatel nezalamovali na nový řádek, ale pokračovali by dál s tím, že by tam byl posuvník do strany.
CSS:

#vyberUzivatelu{
    width: 100%;
    height: 100px;
    overflow-x: auto;
    overflow-y: hidden;
}

.vyberUzivatelu-uzivatel{
    width: 90px;
    height: 100px;
    padding: 0px 5px;
    text-align: center;
}

Předem děkuji za radu. :-)

Odpovědět
30.6.2016 23:37
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Odpovídá na Martin Štěpánek
Libor Šimo (libcosenior):1.7.2016 6:00

http://stackoverflow.com/…l-scroll-css

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
1.7.2016 6:00
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Erik Bystroň
Člen
Avatar
Erik Bystroň:1.7.2016 7:05

Ahoj, změn text-align: center na left a mělo by se to tam vlest :)

 
Nahoru Odpovědět
1.7.2016 7:05
Avatar
Erik Bystroň
Člen
Avatar
Erik Bystroň:1.7.2016 7:09

Nebo si dej do css tohle:
width: auto;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;

 
Nahoru Odpovědět
1.7.2016 7:09
Avatar
František Petko
Člen
Avatar
František Petko:1.7.2016 20:36

Nemám teď tušení jak udělat ten posuvník ... ale když těch položek bude víc, mohl by se udělat automaticky. Ale když chceš mít v jednom řádku všechny položky třídy 'uzivatel', tak tam dej <span> místo <div>. Protože div je blokový element a span je řádkový. Jinak řečeno tag <div> před sebou a za sebou udělá konec řádku. Span se bez problému může vyskytovat v jednom řádku. Myslím, že tohle by mohlo tvůj problém vyřešit kromě vytvoření svého posuvníku.

 
Nahoru Odpovědět
1.7.2016 20:36
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.