mdl卡的分割线怎么去掉

Question

Codepen

<div class="mdl-card mdl-shadow--6dp">
    <div class="mdl-card__title mdl-color--primary mdl-color-text--white relative">
        <h2 class="mdl-card__title-text">Simple Login</h2>
    </div>

    <div class="mdl-card__supporting-text">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" id="login"/>
            <label class="mdl-textfield__label" for="login">Login</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="password" id="password"/>
            <label class="mdl-textfield__label" for="password">Password</label>
        </div>
    </div>

    <div class="mdl-card__actions mdl-card--border">
        <div class="mdl-grid">
            <button class="mdl-cell mdl-cell--12-col mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
                Login
            </button>

        </div>

        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--12-col">
                <a onClick='flip("show-left")' class="mdl-color-text--primary">Sign up!</a>
                <a onClick='flip("show-bottom")' class="mdl-color-text--primary" style="float: right">Lost
                    Password?</a>
            </div>
        </div>
    </div>
</div>

我认为按钮上方的分割线不应该出现。如何删除它？

我的英文不是很好，希望你能明白我的意思。

Answer 1

只需从 mdl-card__actions div 中删除 mdl-card--border 类，以消除 MDL 卡该部分的边框。所以更新后的div 看起来像这样：

<div class="mdl-card__actions">
  <!-- additional html... -->
</div>