Question

如何将list元素中的两个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"或display: inline-block;，因为默认情况下，块会内置一个换行符，这样就会删除该中断。

在<li> </li>元素

1 个答案: