如何更改此材料設計並在CSS HTML中將表單拉到右側？
[英]How to change this material design and pull the form to right side in 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。 我需要根據所附圖片進行更改
2 個解決方案
解決方案1
0 2018-03-21 10:01:11
解決方案2
0 2018-03-21 10:02:31
我已經調整了CSS以實現對齊，並且還允許以后輕松插入圖像。
所有更改都記錄在CSS中。 希望這可以幫助。
html, body { height: 100%; width: 100%; /* Added */ } html { display: table; /* margin: auto; Removed */ } body { display: table-cell; vertical-align: middle; } .margin { margin: 0 !important; } .row { margin-left: auto; margin-right: auto; margin-bottom: 20px; min-width: 300px; } #login-page { /* Added to allow for easy insert of image later */ display: flex; justify-content: flex-end; /* This actually moves the form to the right */ width: 100%; } .row .col.s12 { /* Added to overwrite width: 100% */ width: auto!important; }
<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"> <div id="login-page" class="row"> <div class="col s12 z-depth-6 card-panel"> <form class="form-signin mx-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>
如何使用HTML，CSS和JQuery使菜單在移動設備的右側滑動？
[英]How to make menu to slide form the right side in mobile device using HTML, CSS and JQuery?
如何使用 html 和 css 在右箭頭符號內創建文本設計
[英]how to create design of Text within right arrow symbol with html and css
如何在不留空格的情況下將按鈕移到右側| HTML/CSS
[英]How to move a button to the right side without leaving a space | HTML/CSS
如何使用 HTML 和 CSS 正確格式化和分割圖像以位於文本的右側
[英]How to properly format and section an image to be on the right side of text with HTML and CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.