如何分隔图标和输入类型文本框并将div移到右角?

预期产量:

实际输出:

背景图像缩放不一样,并且div没有向右移动,我需要用黑线分隔图标和文本框,这也无法正常工作。

我的login.js是:

import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.css'
import css from './login.css'
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';

import logo from '../images/pam-logo-.png';

export default class Login extends Component {
    render() {
        return (
            <div style={{width:"350px",height:"320px"}}>
            <form className="login-form" style={{marginTop:"20px"}} >
                <FormGroup>
                <img src={logo} width="150" height="70" style={{marginLeft:"65px"}} />
                </FormGroup>
                <FormGroup>
                    <Input type="email" id="icon1" placeholder="Enter Email Address" style={{width: "250px",marginLeft:"13px"}} />
                    </FormGroup>
                    <FormGroup>
                    <Input type="password" id="icon2" placeholder="Enter Password"  style={{width: "250px",marginLeft:"13px"}} />
                    </FormGroup>
                    <FormGroup>
                    <Button color="info"  style={{width:"250px",marginLeft:"13px"}}>Login</Button>
                    </FormGroup>


            </form>
            </div>
        );
    }
}

我的login.css是:

@media all and (min-width: 480px) {
    .Login {
      padding: 60px 0;
    }

    .Login form {
      margin: 0 auto;
      max-width: 320px;
    }
  }
  .logindiv
{
  margin-left:50px ;
}
.login-form {
    width: 100%;
    max-width: 330px;
    padding: 25px;
    margin: auto;
    height: 100%;

  }

  #icon1{
    background: white url(../images/login-mail.png) left no-repeat;
    padding-left: 37px;
    margin-left: 37px;
  }

  #icon2{
    background: white url(../images/login-password.png) left no-repeat ;
    padding-left: 37px;
    margin-left: 37px;
    display: inline-block;
    border-left: 1px solid black;

  }
  .col {
    display: inline-block;
    border-right: 1px solid black;
    padding: 5px;
  }

任何想法请..!如果我将div移到背景空白处,只是不扩大元素,并且div也需要在预期输出中弯曲

评论