Css 在手机上的列表项中显示多个divs列

我正在构建一个足球应用程序（使用phonegap、主干网、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> 

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

---

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

这是因为

p

元素是块级元素。这意味着他们将占据自己的线路。将

p

更改为内联元素

p.player-name {
  display: inline;
}

---

或者使用

span

元素，默认情况下是

inline

。

这是因为

p

元素是块级元素。这意味着他们将占据自己的线路。将

p

更改为内联元素

p.player-name {
  display: inline;
}

或者使用

span

元素，默认情况下为

inline