Question

我正在用angular6材料做项目。我已使用angular6材料设计了登录页面，但无法将该登录表单放置在页面右侧。

我尝试过使用margin-top，margin-bottom，margin-left和right，但是它们都不起作用。

请帮助。

这是我的代码 app.component.html

 <body>
        <div class="container">
        
        <mat-card class="example-card">
        
              <mat-grid-list cols="1" rowHeight=5:1>
                  <mat-grid-tile>
                    <mat-card class="login">Login</mat-card>
                  </mat-grid-tile>
                  <mat-grid-tile>
                      <mat-form-field>
                          <input matInput placeholder="name">
                          <span matSuffix><mat-icon>account_circle</mat-icon></span>
    
                        </mat-form-field>
                      </mat-grid-tile>
    
                      <mat-grid-tile>
                          <mat-form-field>
                              <input matInput placeholder="password">
                          <span matSuffix><mat-icon>visibility</mat-icon></span>
    
                            </mat-form-field>
                          </mat-grid-tile>
                          <mat-grid-tile>
                              <button mat-raised-button color="accent">Submit</button>
                          </mat-grid-tile>
            
                
                </mat-grid-list>
        </mat-card>
      </div>
    </body>

app.component.css

html, body {
        height: 100%;
        background-image: url("/assets/pencil4.jpg");
        background-position: center;
        background-size: cover;
        /* background-attachment: fixed; */
    
      }  
       */
    
    mat-card{ 
        display: flex;
        height:41% ;
        background-color: gray;
      }  
        
      
     .login{
        width:90%;
        height:30% ;
        background-color: #FFDE03;
        font-weight: 800;
        border-radius: 5px;
    } 
    
     mat-form-field{
        width:90%;
    }
    
    
    mat-grid-tile{
        width:400px;
    }
    
    .example-card {
        max-width: 300px;
      }

如果magin-top:800px,

如果我使用padding-top：300px;

Answer 1

将CSS添加到示例卡。使用margin-left和margin-top对齐右边。

 .example-card {
        max-width: 300px;
        margin-left: 800px;
        margin-top:100px;
      }

如果margin-top不起作用。尝试padding-top

看我的例子

https://stackblitz.com/edit/angular-qfadvh

如何使用angulat6材料将登录表单放置在页面的右侧

1 个答案: