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: problém s elementem <a> v <li>

Aktivity
Avatar
bunny
Neregistrovaný
Avatar
bunny:6.7.2013 21:25

hezký večer,
udělal jsem menu kde jsou odkazy, ale nevím proč jsou ty odkazy malý rozměrově, chtěl bych aby uživatel mohl kliknout kdekoliv v <li> a ne v <a>. Asi jsem to nepopsal nejlíp, ukaziju kod

<style type="text/css">
                nav
        {
                position: static;
                margin-left: auto;
                margin-right: auto;
                width: 70%;
                margin-top: 15%;
        }
        nav ul
        {
                margin: 0px;
                padding: 0px;
        }
        nav ul li
        {
                list-style: none;
                display: inline-block;
                background-color:green;
                padding: 5%;
                margin: 5px;
        }
        nav ul li a
        {
                list-style-type: none;
                display: inline-block;
                background-color:red;
                padding: 5%;
                margin: 5px;
                height: 100%;
                width: 100%;
                color: black;
                text-align: center;
        }
        </style>
                <nav>
                        <ul>
                                <li><a href="#">neut</a></li>
                                <li><a href="#">rane</a></li>
                                <li><a href="#">fale</a></li>
                                <li><a href="#">iria</a></li>
                        </ul>
                </nav>
 
Odpovědět
6.7.2013 21:25
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:7.7.2013 0:14

Nedělej marginy, paddingy, vlastně nic v % ...

Když chceš mít klikatelné celou položku v menu udělej to takto :

li
{
  width: 50px;
  height: 25px;
  padding: 0px;
  float: left;
}

a
{
  list-style-type: none;
  color: red;
  width: 50px;
  height: 25px;
  float: left;
}

Mělo by to fungovat :)

Editováno 7.7.2013 0:15
Nahoru Odpovědět
7.7.2013 0:14
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
bunny
Neregistrovaný
Avatar
bunny:7.7.2013 8:49

díky, funguje

 
Nahoru Odpovědět
7.7.2013 8:49
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.