如何让列表元素(有序列表的一部分)内的两个 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>最佳答案
尝试添加 style="display: inline" 或 display: inline-block;，因为默认情况下 block 中内置了一个换行符，这会删除该换行符.
关于html - 在 <li></li> 元素内并排显示两个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50892662/