html - 如何更改此 Material 设计并在CSS HTML中将表单拉到右侧？

https://jsfiddle.net/z24kaL2d/4/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap Material Design">
<meta name="keywords" content="Bootstrap Material Design, Sass">
<meta name="author" content="Federico Zivolo, Kevin Ross, and Bootstrap Material Design contributors">

<title>

  Login Form

</title>


<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">


  </head>
  <body>
    <style type="text/css">
html,
body {
    height: 100%;
}
html {
    display: table;
    margin: auto;
}
body {
    display: table-cell;
    vertical-align: middle;
}
.margin {
  margin: 0 !important;
}
.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    min-width: 300px;
}
</style>

<div id="login-page" class="row">
    <div class="col s12 z-depth-6 card-panel">
  <form class="form-signin m-x-auto">
       <div class="row">
          <div class="input-field col s12 center">
            <img src="../assets/img/logo.png" alt="" class="responsive-img valign profile-image-login">
            <p class="center login-form-text">Login Form</p>
          </div>
        </div>
    <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-social-person-outline prefix"></i>
            <input class="validate" id="email" type="email" required="">
            <label for="email" data-error="wrong" data-success="right" class="center-align">Email</label>
          </div>
        </div>
    <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-action-lock-outline prefix"></i>
            <input class="validate" id="password" type="password" required="">
            <label for="password">Password</label>
          </div>
        </div>
            <div class="row">
          <div class="input-field col s12 m12 l12  login-text">
              <input type="checkbox" id="remember-me" />
              <label for="remember-me">Remember me</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s6 m6 l6">
            <p class="margin medium-small"><a href="/register">Register Now!</a></p>
          </div>
          <div class="input-field col s6 m6 l6">
              <p class="margin right-align medium-small"><a href="forgot-password.html">Forgot password?</a></p>
          </div>
        </div>
  </form>

</div>

</div>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>

  </body>
</html>

这是我的代码。我正在使用材料设计，无法将表格移到右侧。我可以按照图片所示将表格移到右侧

我无法将表格移到右侧。在这种情况下，请帮助我解决问题

这是我的jsfiddle。我需要根据所附的图像进行更改

html - 如何更改此 Material 设计并在CSS HTML中将表单拉到右侧？-LMLPHP

最佳答案

这是一个jsfiddle，它可以满足您的需求。诀窍是在card-panel中添加两个div：一个用于保存图像，另一个用于表单。请注意这两个div上的col s6类，以使其水平放置。