在移动设备上的列表项中显示多个div列

Question

我正在建立一个足球应用程序（使用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%;
}

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

list example http://match.webintelligence.ie/img/motm.png

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

Answer 1

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

p.player-name {
  display: inline;
}

或使用span元素，默认情况下为inline。