javascript - 如何分离图标和输入类型文本框并将div移动到右上角？

Question

预期输出：

实际输出：

背景图像缩放不一样，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 也需要在预期输出中弯曲

标签： javascripthtmlcssreactjs

Answer 1

将电子邮件地址字段和密码字段包装在 div 中，如下所示。

<div class="email_wrap">
                    <Input type="email" id="icon1" placeholder="Enter Email Address"/>
</div>
<div class="password_wrap">
<Input type="password" id="icon2" placeholder="Enter Password"/>
</div>
    <style>
.email_wrap{width:100%;float:left;position:relative;}
.password_wrap{width:100%;float:left;position:relative;}
.email_wrap::before{content:url(../images/login-mail.png);position:absolute;left:5px;top:5px;}
.password_wrap::before{content:url(../images/login-password.png);position:absolute;left:5px;top:5px;}
</style>

注意：根据您的设计调整 BEFORE 元素的顶部和左侧 CSS 以适合您的设计。