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

希望它有所帮助。

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

1 个答案: