“折叠式菜单”列表将元素外部的跨度对齐

Question

我正在使用metismenu，我需要可点击的父类别。我可以通过定义可点击元素来实现这一点。

$("#menu").metisMenu({   triggerElement: '.has-arrow'});

现在的问题是我的html列表布局更改

<li><a class="has-child" href="http://google.com">Monitors <span class="has-arrow"></span></a><ul>...

到

<li><a class="has-child" href="http://google.com">Monitors</a> <span class="has-arrow"></span><ul>....

这会打破对齐，因为跨度现在位于“a”标记之外。如何将span类与右侧对齐，使其与“a”元素内联？

所需的输出是这样的：

Answer 1

通过将内联块指定给li元素，可以将span元素的span对齐。

＆＃13;

＆＃13;

li{

display: inline-block;

}


li .has-child{

margin-right: 20px;
}

＆＃13;

<li>
<a class="has-child" href="http://google.com">Monitors</a> 
<span class="has-arrow"></span></li>>

＆＃13;

＆＃13;

＆＃13;