我的任务是设计一个网站，我遇到了关于列表项内元素水平对齐的障碍。
我已经用 this JSFiddle 复制了相关菜单的结构.
我想知道如何在展开菜单时使用 fiddle 中的按钮保持绿色 div 的位置(如一开始所示)。我需要它们与第一个 <a> 保持水平对齐各自的元素 <li>元素，当显示子菜单时。
最佳答案
你可以这样做，例如:
<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>关于html - 如何在扩展列表项中保持水平元素对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52720623/