Question

example最佳描述。

我有两个问题，经过数小时的研究后我无法解决。

1）停止HTML分隔单个li内容。例如，我们可以看到在第一列中呈现的C组标题，其余的在第二列中呈现。

2）渲染确定按钮，使其超出ul - 在下拉房间的左下角。

<div>
  <span style='cursor:pointer; float:right'>
                                    <div class="btn-group pull-right">
                                        <button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="glyphicon glyphicon-cog"></span>
  </button>

  <ul style='padding:10px; width:auto' class="dropdown-menu zeon-search-settings-dropdwown-menu zeon-two-columns-ul">
    <li class="dropdown-submenu zeon-dropdown-submenu">
      <div class='section-heading-3'>Group A</div>
      <div>
        <label class='zeon-input-label'>
          <input id="white_agreements_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
      </div>
      <div>
        <label class='zeon-input-label'>
          <input id="black_agreements_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
      </div>
    </li>
    <li class="dropdown-submenu zeon-dropdown-submenu">
      <div class='section-heading-3'>Group B</div>
      <div>
        <label class='zeon-input-label'>
          <input id="cash_payment_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
      </div>
      <li class="dropdown-submenu zeon-dropdown-submenu">
        <div class='section-heading-3'>Group C</div>
        <div class="row">
          <div class="col-sm-1">

          </div>
          <div class="col-sm-7">
            <form>
              <label class="radio-inline">
                <input type="radio" name="optradio">
                < </label>
                  <label class="radio-inline">
                    <input type="radio" name="optradio">=
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="optradio">>
                  </label>
            </form>
          </div>
          <div class="col-sm-4">
            <input class="form-control input-sm" id="inputsm" type="text" placeholder='количетсво дней'>
          </div>
        </div>
      </li>
      <li class="dropdown-submenu">
        <div class='section-heading-3'>Group D</div>
        <div>
          <label class='zeon-input-label'>
            <input id="full_package_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
        </div>
        <div>
          <label class='zeon-input-label'>
            <input id="not_full_package_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
        </div>
      </li>
      <li class="dropdown-submenu">
        <button id='vendor_list_filter_ok_button' type="button" class="next btn btn-default btn-sm pull-left">ОК</button>
      </li>
  </ul>
</div>
</span>
</div>

Answer 1

您可以使用flexbox（您可以使用ul.dropdown-menu的高度进行播放，如果添加更多高度，则group-c块将移动到左列）

这是添加的css：

.open>ul.dropdown-menu {
  display: flex;
  width: 400px !important;
  flex-wrap: wrap;
  flex-direction: column;
  height: 250px;
}
ul.dropdown-menu li {
  width: 50%;
}

这是工作的jsfiddle：
https://jsfiddle.net/p6yf17du/

更新

如果您不关心（或者您可以更改标记）关于您可以使用的元素的顺序：

.open>ul.dropdown-menu {
    display: flex;
    width: 400px !important;
    flex-wrap: wrap;
}

这将改变元素的顺序

A | C
B | D

到

A | B
C | D

但是，这样你就不需要设置菜单的高度（只有宽度，这对我来说很有意义）。

你可以在这里查看：
https://jsfiddle.net/m0rg1uoe/

Answer 2

您可以尝试解决此问题，将<li>元素添加到column-span元素。将此规则应用于值all，它将强制最后<li>个元素覆盖所有列。

例如，请参阅以下代码：

HTML：

...
<li class="dropdown-submenu btn-confirm">
    <button id='vendor_list_filter_ok_button' type="button" class="next btn btn-default btn-sm pull-left">ОК</button>
</li>
...

CSS ：

.btn-confirm {
  -webkit-column-span: all;
          column-span: all;
}

一旦最后一个元素覆盖两列，也会正确显示Group C标题。

您可以找到实时演示here。

注意：column和column-span属性在不同的浏览器中存在一些问题。请参阅caniuse网站并查看浏览器支持。

Answer 3

试试这个

.zeon-dropdown-submenu {
    margin-top: 10px;
    min-height: 100px;
}

双列无序列表 - 将每个li的内容保存在一列中

3 个答案:

更新