素材CSS可折叠标头对齐问题

Question

我有一个codePen link here

我想要的是最后一个按钮（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.

Updated codepen

Answer 2

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