Diskuze: Horizontální menu s různou počtem řádku

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

solta

Člen

solta:5.7.2014 11:01

Ahoj prosím o pomoc se stylováním menu v ukázce jsou tři položky každá zabírá jiný počet řádků a jsou tedy různě vysoké já bych potřeboval aby byli všechny stejně vysoké a text byl zarovnaný vertikálně na střed.

<style>
    nav {display: table; width: 100%; border: none; margin: 0; padding: 0;}
    nav ul{ display: table-row; margin: 0px; padding: 0px; list-style: none; width: 100%}
    nav ul li { display: table-cell; padding: 0; margin: 0; vertical-align: middle;}
    nav ul li a{ display: block; padding: 6px 12px; color:#000; text-decoration: none; text-align: center;  background: #cb3f0d;}
    nav ul li a:hover { color:#FFF; background: #eb5f2d; }
</style>
<nav>
    <ul>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item<br>Item </a>
        </li>
        <li>
            <a href="#">Item<br>Item<br>Item </a>
        </li>
    </ul>
</nav>

Editováno 5.7.2014 11:02

Odpovědět

5.7.2014 11:01

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:5.7.2014 11:55

napadá mě možnost, že nastavíš nav pozadí to samé co má li. hover pro a ostraníš, ale jeho obsah nastavíš do hoveru pro li. Aby fungoval i hover pro změnu barvy nastavíš barvu do li a ačku dáš barvu na inherit.

nav ul li:hover  {
    background: #eb5f2d;
}

To by teoreticky fungovat mohlo. Celé to máš na jsfidle http://jsfiddle.net/3Le5d/2/

Nahoru Odpovědět

5.7.2014 11:55

solta

Člen

solta:5.7.2014 13:21

to máš samozřejmě pravdu ale odkaz je vysoký pouze na ne ten text což není moc dobre

Nahoru Odpovědět

5.7.2014 13:21

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 3 zpráv z 3.