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}

使整个列表项在HTML5中可单击

3 个答案: