在手机上的列表项目内显示多个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默认。