引导下拉菜单中的图像和几行文本

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/

但是，宽度计算不正确，第二个浮动块被移动到第一个块下方。

我不明白为什么会发生这种情况以及如何解决这个问题。

附言我知道我可以用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

希望对您有所帮助。