Удвоенный промежуток между кнопкой и картой - Материализовать CSS - PullRequest
Новая
       4

Удвоенный промежуток между кнопкой и картой - Материализовать CSS

0 голосов
/ 06 мая 2020

Я учусь создавать страницы с помощью Materialize CSS. На самом деле у меня проблема с зазором между нижним краем кнопки отправки и краем карты. (посмотрите на экран) По моему мнению, этот разрыв вдвое больше, чем должен.

Пожалуйста, помогите! Спасибо всем, кто заинтересовался! <3 </p> 

<!DOCTYPE html>
  <html>
    <head>
        <link rel="stylesheet" href="css/main.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
        <title>Login page</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="login-box row valign-wrapper">
            <div class="col s12 m4 offset-m4">
                <div class="card">
                    <form class="card-content">
                        <div class="row login-title">
                            <span class="card-title">Training Login Form</span>
                        </div>
                        <div class="row">
                            <div class="form-field col s12 m6">
                                <label for="username">Login</label>
                                <input type="text" id="username" placeholder="Type your login">
                            </div>
                            <div class="form-field col s12 m6">
                                <label for="username">Password</label>
                                <input type="password" id="username" placeholder="Type your password">
                            </div>
                        </div> 
                        <div class="form-field">
                            <label>
                                <input type="checkbox" class="filled-in" id="rememberPass">
                                <span>Remember password?</span>
                            </label>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <button class="btn waves-effect waves-light col s12" type="submit" name="action">Submit</button>
                            </div>
                        </div>             
                    </form>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

enter image description here

1 Ответ

0 голосов
/ 06 мая 2020

Materialize использует margin-bottom: 20px на всех .row - удалите его для последнего .row, и вы удалите лишний интервал. 

.card-content .row:last-of-type {
    margin-bottom: 0;
}

Codepen здесь .

Я рекомендую разобраться с использованием инспектора в chrome - выделите элемент, вызывающий проблемы, и визуально посмотрите, какие поля и отступы применяются, обновите прямо в консоли, а затем вы можете написать соответствующий правило стиля в вашем css.

inspector

...