如何在扩展列表项中保持水平元素对齐？答案

【问题标题】：How can I keep horizontal element alignment inside an expanding list item?如何在扩展列表项中保持水平元素对齐？
【发布时间】：2018-10-09 12:02:22
【问题描述】：

我的任务是为网站设计样式，但在列表项内的元素水平对齐方面遇到了障碍。

我已经用this JSFiddle 复制了相关菜单的结构。

我想知道当我使用小提琴中的按钮展开菜单时如何保持绿色 div 的位置（从一开始就显示）。当显示子菜单时，我需要它们与各自 <li> 元素中的第一个 <a> 元素保持水平对齐。

【问题讨论】：

标签： html css menu styling

【解决方案1】：

你可以这样做，例如：

<html>
  <script>
    function clickFunction(){
      var elements = document.getElementsByClassName("submenu");
      for(var i = 0; i < elements.length; i++){
        elements[i].classList.toggle("display-sublist");
      }
    }
  </script>
  <style>
    ul{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    ul li{
      width: 100%;
      background-color: blue;
    }
    .submenu{
      display: none;
    }
    .display-sublist{
      display: block;
    }
    ul li a{
      width: 95%;
      background-color: red;
    }
    .main-test {
      display: inline-block;
      float: left;
      width: 90%;
    }
    .cancel-test{
      display: inline-block;
      background-color: green;
      float: right;
      width: 10%;
    }
    .expand-button{
      clear: both;
      display: block;
    }
  </style>
  <body>
    <ul>
      <li>
        <a class="main-test" href="#">Something</a>
        <a class="cancel-test">x</div>
        <ul class="submenu">
          <li>
            <a href="#">Sub-Something</a>
          </li>
          <li>
            <a href="#">Sub-Something</a>
          </li>
          <li>
            <a href="#">Sub-Something</a>
          </li>
        </ul>       
      </li>
      <li>
        <a class="main-test"href="#">Something</a>
        <a class="cancel-test">x</a>
          <ul class="submenu">
            <li>
              <a href="#">Sub-Something</a>
            </li>
            <li>
              <a href="#">Sub-Something</a>
            </li>
          </ul>         
        </li>
        <li>
          <a href="#">Something</a>
        </li>
        <li>
          <a href="#">Something</a>
        </li>
      </ul>
		<button onclick="clickFunction()" class="expand-button">Expand</button>
	</body>
</html>

【讨论】：

你一针见血。做得好。为了简洁起见，我不得不提一下，正是元素的确切顺序——a 标签后面的 div——使这个解决方案起作用。