css - JQuery Mobile，如何向 li 元素添加两个或多个 anchor ？

Question

是否有人可以创建一个 JSfiddle 代码来演示如何在同一个 li 项中集成两个或多个 anchor 标记？我已经搜索过，但没有明确的答案，比如你如何将 li 元素与让我们说 3 个方形 anchor 1/3 每个。例如，您是否需要为每个 anchor 添加 div 标签？

例如。

<ul>
 <li>
   <a href= "#anchor1"></a>
   <a href= "#anchor2"></a>
   <a href= "#anchor3"></a>
 </li>
 <li>
   <a href= "#anchor1"></a>
   <a href= "#anchor2"></a>
   <a href= "#anchor3"></a>
 </li>

Answer 1

您可以使用 jQuery Mobile 网格:

http://demos.jquerymobile.com/1.4.5/grids/

例如:

<li>
    <div class="ui-grid-b">
        <div class="ui-block-a">
            <a href= "#anchor1"><img src="http://lorempixel.com/80/80/food/1/" /></a>
        </div>
        <div class="ui-block-b">
            <a href= "#anchor1" class="ui-btn">Some text</a>
        </div>
        <div class="ui-block-c">
            <a href= "#anchor1" class="ui-btn"> Delete</a>
        </div>
    </div>
</li>

Here is a simple DEMO

注意:然后您可以使用 CSS 来调整宽度、边距、填充等。