html - 在里面并排显示两个div元素

Question

如何让列表元素（有序列表的一部分）内的两个 div 并排显示？

有问题的 div 带有class="dd-handle"和class="btn-group"。

我正在使用 Bootstrap v3.3.4 和 Nestable2.js

我试过以下。在这种情况下，btn-group 显示在第一个 div 下方。

<li class="dd-item" data-id="id">
                <div class="dd-handle">Section name</div>
                <div class="btn-group">
                    <a data-toggle="dropdown" class="dropdown-toggle" role="button">
                        <span class="icon icon-dots-three-horizontal"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name">
                                <span></span>
                                Rename
                            </a>
                        </li>
                        <li>
                            <a href="#myOtherModal" data-toggle="modal">
                                <span></span>
                                Add New
                            </a>
                        </li>
                    </ul>
                </div>
   </li>

在这种情况下，Nestable2.js 库的布局和功能完全关闭。

<li class="dd-item" style="display:flex; flex-direction:row; justify-content: space-around;" data-id="id">
                    <div class="dd-handle" style="display:flex; flex-direction:column;">Section name</div>
                    <div class="btn-group" style="display:flex; flex-direction:column;">
                        <a data-toggle="dropdown" class="dropdown-toggle" role="button">
                            <span class="icon icon-dots-three-horizontal"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name">
                                    <span></span>
                                    Rename
                                </a>
                            </li>
                            <li>
                                <a href="#myOtherModal" data-toggle="modal">
                                    <span></span>
                                    Add New
                                </a>
                            </li>
                        </ul>
                    </div>
       </li>

Answer 1

尝试添加style="display: inline"or display: inline-block;，因为默认情况下块中内置了换行符，这将删除该中断。