1

我正在构建一个足球应用程序（使用 phonegap、backbone、require 和 topcoat.io），允许用户选择他们的最佳球员（MOTD）。

在 MOTD 模板中，我想显示球员姓名、位置、指向他们完整外部资料的链接和单选按钮。HTML 看起来像：

<li class="topcoat-list__item">

    <div class="player-container">

        <div class="player-details">
        <label for="player_516" class="topcoat-radio-button">
            <input type="radio" name="player_id" id="player_516" value="516">

            <p>Robin van Persie</p>
            <p>Forward</p>
       </label>
        </div>

        <div class="player-more">
            <a target="_blank" href="http://www.premierleague.com//en-gb/players/profile.overview.html/robin-van-persie">More</a>
        </div>            

    </div>  
</li>

CSS是：

.player-more{
    width:48%;
    float:left;
}

.player-details{
    vertical-align: middle;
    float:left;
    width:48%;
}

但它在手机上看起来像这样：

列表示例 http://match.webintelligence.ie/img/motm.png

也许我试图在每个列表项中包含太多信息。关于如何更好地呈现这一点的任何建议？也许我不需要单选按钮。相反，如果用户单击列表上的任何位置，它将突出显示它，这将是他们的选择。除非单击“更多”，在这种情况下，外部链接将显示...

4

1 回答 1

1

发生这种情况是因为您的p元素是块级元素。这意味着他们将占据自己的路线。将 更改p为内联元素。

p.player-name {
  display: inline;
}

或者使用默认的span元素inline。

于 2013-09-05T12:42:37.783 回答