Сделать целую <li> как ссылку с правильным HTML

Я знаю, что это было много раз, но я не смог найти решение в моем конкретном случае.

У меня есть панель навигации, и я хочу, чтобы все <li> были "связаны" или "кликабельны", если хотите. Теперь только <a> (и <div>, в котором я искал), является "кликабельным".

Я пробовал метод li a {display: inner-block; height: 100%; width: 100%}, но результаты были просто ужасны.

Источник можно найти здесь: http://jsfiddle.net/prplxr/BrcZK/

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="menu">
                <div id="innermenu">    
                    <ul id="menulist">       
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk2</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk3</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk4</div></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

У кого-нибудь есть опрятное решение?

Заранее благодарю вас!

Ответ 1

Избавьтесь от <div> s.
Установите теги <a> на display: block
Переместите отступ от <li> к <a>.
<li> нужно будет либо плавать, либо display: inline-block

Пример: http://jsfiddle.net/8yQ57/

Ответ 2

Просто используйте "блок отображения" для ссылки.

ul {
  display: block;
  list-style-type: none;
}

li {
  display: inline-block; /* or block with float left */
  /* margin HERE! */
}

li a {
  display: block;
  /* padding and border HERE! */
}

Вот пример http://jsfiddle.net/TWFwA/:)

Ответ 3

У меня просто была эта проблема.

Ответ не может быть проще:

<li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
Wrong:
.menuitem {
    list-style-type:        none;
    display:                 inline;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

Correct
.menuitem a {
    list-style-type:        none;
    display:                 block;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

Другими словами, вы хотите применить css, который LI имел к элементу A. Убедившись, что A является элементом строки блока

Ответ 4

Просто отформатируйте a непосредственно вместо li со своими стилями.

У меня есть альтернатива вашей скрипке http://jsfiddle.net/BrcZK/1/

Ответ 5

Я думаю, вы, возможно, имели в виду inline-block, а не inner-block:

li a {display: inline-block; height: 100%; width: 100%; }

Кроме того, inline-block имеет свой собственный набор проблем со старыми браузерами IE и, вероятно, не будет реагировать так, как вы ожидали.

Ответ 6

Вы должны сделать элементы a display:block или display:inline-block.

Ответ 7

Вот что я делаю:

a { display: block; }

Затем создайте якоря, как я считаю нужным.

Здесь скрипка: http://jsfiddle.net/erik_lopez/v4P5h/

Ответ 8

сэр, вы используете jquery? если да, вы можете попробовать:

$("li").click(function(){
   $(this).find('a').click();
});

или вы можете использовать его также как css:

li{
  position:relative;
}
li a {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

Выберите один... Удачи.

Ответ 9

Переместите теги <a>, чтобы они обменивали теги <li>. В соответствии с ответом this теги привязки должны содержать встроенные элементы, и похоже, что ваш <li> является встроенным, поэтому это должно быть действительно.