css - 在 HTML5 中使整个列表项可点击

Question

我正在使用 HTML5、backbone.js、phonegap 和 topcoat.io 创建一个移动应用程序。我想让整个列表项可点击。目前我有：

<ul class="topcoat-list">


    <li class="topcoat-list__item">

        <a href="#teams">Teams</a>
    </li>

    <li class="topcoat-list__item">

        <a href="#games/1">Upcoming Fixtures</a>

    </li>

</ul>

但是用户需要触摸“团队”而不是列表项上的任何位置。为了使整个列表项可点击，我将其包装在锚标记中：

    <a href="#teams">
        <li class="topcoat-list__item">

            Teams
        </li>
    </a>

    <a href="#games/1">
        <li class="topcoat-list__item">

        Upcoming Fixtures
        </li>
    </a>

这是正确的方法吗？它有效，但它看起来很脏......

Answer 1

将锚显示为块。

ul,li {
   list-style: none;
   margin: 0;
   padding: 0;
}
a {
   display: block;
   width: 100%;
   height: 100%;
}

另外，检查这个fiddle。

您可以添加高度/宽度或填充以使链接更大。

Answer 2

<li class="topcoat-list__item">
    <a href="#teams">Teams</a>
</li>
<li class="topcoat-list__item">
     <a href="#games/1">Upcoming Fixtures</a>
</li>

或者使用 JS .click() 函数

Answer 3

尽管这不是有效的 HTML，但将锚显示为块应该可以解决问题。

a#teams{display:block}