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

HTML a CSS HTML a CSS Horizontální menu s různou počtem řádku American English version English version

Avatar
solta
Člen
Avatar
solta:

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
Avatar
Michal Žůrek (misaz):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
solta
Člen
Avatar
solta:

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.