按钮和卡片之间的双倍间隙 - Materialize CSS

问题描述 投票：0回答：1

我正在学习用Materialize CSS来制作页面，其实我的问题是提交按钮的下边缘和卡片的边缘之间的间隙。(看屏幕)在我看来，这个间隙比它应该的要大一倍。

请大家帮忙！谢谢大家感兴趣！<3

<!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

html css materialize
1个回答
0
投票

Materialize使用 margin-bottom: 20px 在所有 .row - 删去 .row 然后你就可以去掉多余的间距了。

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

编码笔 此处.

我建议使用chrome中的检查器--高亮显示导致你出现问题的元素，并直观地看到正在应用的margin和padding，直接在控制台中更新，然后你可以在css中写下适当的样式规则。

inspector

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.