css - 内联嵌套列表，将主列表保持在顶部

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>