Как убрать разделительную линию MDL-карты - PullRequest
Новая
       20

Как убрать разделительную линию MDL-карты

0 голосов
/ 03 октября 2018

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>

Я думаю, что разделительная линия над кнопкой не должна появляться.Как мне удалить его?

Dividing line image

Мой английский не очень хорош, надеюсь, вы понимаете, о чем я.

1 Ответ

0 голосов
/ 03 октября 2018

Просто удалите класс mdl-card--border из вашего mdl-card__actions div, чтобы убрать границу в этом разделе вашей карты MDL.Итак, обновленный div выглядит так: 

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