Question

我曾负责网站的样式设计，在那里遇到了有关列表项内元素水平对齐的障碍。

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

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

Answer 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>

如何在展开的列表项中保持水平元素对齐？

1 个答案: