如何去除mdl-card的分界线

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>