Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
Avatar
Martin Štěpánek (Enormyk):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
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Nahoru Odpovědět  +2 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 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.