圖像和引導下拉菜單中的幾行文字

Question

這可能是一個愚蠢的問題，但我不明白爲什麼它不起作用。 我需要創建一個引導菜單，其中每個項目是左側的圖像和右側的幾行文本。

我寫以下HTML此：

<div class="btn-group"> 
    <ul class="dropdown-menu" style="display: block;"> 
     <li> 
      <a href="#" class="clearfix"> 
       <div class="pull-left"> 
        <span>My image</span> 
       </div> 
       <div class="pull-left"> 
        <div>Text on the right</div> 
        <div>Second line of text</div> 
       </div> 
      </a> 
     </li> 
    </ul> 
</div> 

鏈接到的jsfiddle：https://jsfiddle.net/brucecat5/rr71xmry/

然而，寬度沒有適當地計算和第二浮動塊移動的第一個塊的下方。

我不明白爲什麼會發生，以及如何解決這個問題。

P.S.我知道我可以通過display: table-cell來實現，但我不明白我的方法無效的原因。

Answer 1

我覺得問題是你如何使用下拉菜單類，試試這個：

<div class="btn-group"> 
<ul style="display: block;"> 
    <li> 
     <a href="#" class="clearfix"> 
      <div class="pull-left"> 
       <img src="smiley.gif" alt="Smiley face" width="42" height="42"> 
      </div> 
      <div class="pull-right"> 
       <p>Text on the right</p> 
       <p>Second line of text</p> 
      </div> 
     </a> 
    </li> 
</ul> 

如果你想使用一個下拉菜單，你可以看看在這個頁面的例子： https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp

希望它有幫助。