内联嵌套列表,将主列表保持在最顶层

Question

我猜这个标题不是最好的,但我有两个嵌套列表的问题,第一个是内联的,并在点击时扩展第二个.第二个是常规列表.

我的问题是,即使扩展了其他列表,我也希望将主列表保持连续,现在第一个列表中的第二个项目向下移动.

这是代码:

.toggle-box {
  display: none;
}

.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 5px;
}

.toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
}

.toggle-box:checked + label + div {
  display: block;
}

.toggle-box + label:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

.toggle-box:checked + label:before {
  content: "\2212";
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-inline">
    <li>
        <input class="toggle-box" id="header2" type="checkbox">
        <label for="header2">Math</label>
        <div>
            <ul class="list-unstyled nav nav-list">
                <li>
                    <a ng-click="vm.SelectTool('sum')">
                        <img src="Pictures/sumicon.png" height="20" width="20"> Sum
                    </a>
                </li>
                <li>
                    <a ng-click="vm.SelectTool('multi')">
                        <img src="Pictures/multiplicationicon.png" height="20" width="20"> Multiplication
                    </a>
                </li>
                <li>
                    <a ng-click="vm.SelectTool('divition')">
                        <img src="Pictures/divitionicon.png" height="20" width="20"> Divition
                    </a>
                </li>
                <li>
                    <a ng-click="vm.SelectTool('sub')">
                        <img src="Pictures/subicon.png" height="20" width="20"> Substraction
                    </a>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <input class="toggle-box" id="header3" type="checkbox">
        <label for="header3">Math</label>
        <div>
            <ul class="list-unstyled nav nav-list">
                <li>
                    <a ng-click="vm.SelectTool('sum')">
                        <img src="Pictures/sumicon.png" height="20" width="20"> Sum
                    </a>
                </li>
                <li>
                    <a ng-click="vm.SelectTool('multi')">
                        <img src="Pictures/multiplicationicon.png" height="20" width="20"> Multiplication
                    </a>
                </li>
                <li>
                    <a ng-click="vm.SelectTool('divition')">
                        <img src="Pictures/divitionicon.png" height="20" width="20"> Divition
                    </a>
                </li>
                <li>
                    <a ng-click="vm.SelectTool('sub')">
                        <img src="Pictures/subicon.png" height="20" width="20"> Substraction
                    </a>
                </li>
            </ul>
        </div>
    </li>
</ul>

也可以在这里看到:https: //jsfiddle.net/6wv2u0z9/

Answer 1

将vertical-align:top添加到现有CSS:

.list-inline>li {
  vertical-align: top;
}

.toggle-box {
  display: none;
}
.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 5px;
}
.toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
}
.toggle-box:checked + label + div {
  display: block;
}
.toggle-box + label:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}
.toggle-box:checked + label:before {
  content: "\2212";
}
.list-inline>li {
  vertical-align: top;
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="list-inline">
  <li>
    <input class="toggle-box" id="header2" type="checkbox">
    <label for="header2">Math</label>
    <div>
      <ul class="list-unstyled nav nav-list">
        <li>
          <a ng-click="vm.SelectTool('sum')">
            <img src="Pictures/sumicon.png" height="20" width="20">Sum
          </a>
        </li>
        <li>
          <a ng-click="vm.SelectTool('multi')">
            <img src="Pictures/multiplicationicon.png" height="20" width="20">Multiplication
          </a>
        </li>
        <li>
          <a ng-click="vm.SelectTool('divition')">
            <img src="Pictures/divitionicon.png" height="20" width="20">Divition
          </a>
        </li>
        <li>
          <a ng-click="vm.SelectTool('sub')">
            <img src="Pictures/subicon.png" height="20" width="20">Substraction
          </a>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <input class="toggle-box" id="header3" type="checkbox">
    <label for="header3">Math</label>
    <div>
      <ul class="list-unstyled nav nav-list">
        <li>
          <a ng-click="vm.SelectTool('sum')">
            <img src="Pictures/sumicon.png" height="20" width="20">Sum
          </a>
        </li>
        <li>
          <a ng-click="vm.SelectTool('multi')">
            <img src="Pictures/multiplicationicon.png" height="20" width="20">Multiplication
          </a>
        </li>
        <li>
          <a ng-click="vm.SelectTool('divition')">
            <img src="Pictures/divitionicon.png" height="20" width="20">Divition
          </a>
        </li>
        <li>
          <a ng-click="vm.SelectTool('sub')">
            <img src="Pictures/subicon.png" height="20" width="20">Substraction
          </a>
        </li>
      </ul>
    </div>
  </li>
</ul>