材质css可折叠页眉对齐问题

Question

我在这里有一个codePen链接

我想要的是最后一个按钮(3个点(与左侧的文本对齐。

这是我的代码

<ul class="collapsible popout">
<li class="fade">
<div class="collapsible-header bold">
<div>
<a class=" context-button waves-effect waves-light menuButton" >
<i class="material-icons grey-text text-darken-1">more_vert</i>
</a>
<span class="right light grey-text text-darken-3">Test1</span>
<span class="rightMargin">Test2</span>
<span class="green-text rightMargin" style="word-wrap: break-word;">test4</span>
</div>
</div>
<div class="collapsible-body">
Hello
</div>
<li>
</ul>

CSS

@import url(//fonts.googleapis.com/icon?family=Material+Icons);
.rightMargin {
margin-right: 10px;
}
.menuButton {
float: right;
position: relative;
top: 3px;
margin-left: 15px;
}

Answer 1

您可以使用

position: absolute;
right: 10px; //to align the button to right side.

更新的代码笔

Answer 2

.menuButton {
float: right;
position: absolute;
top: 21px;
right: 12px;
}