Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Nezalomení řádku

Aktivity
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
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ň: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ň: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: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.