Diskuze: Nezalomení řádku

HTML a CSS HTML a CSS Nezalomení řádku American English version English version

Avatar
Martin Štěpánek (Enormyk):

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. června 23:37
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Nahoru Odpovědět  +2 1. července 6:00
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Erik Bystroň:

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

 
Nahoru Odpovědět  -1 1. července 7:05
Avatar
Erik Bystroň:

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. července 7:09
Avatar
František Petko:

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. července 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.