Question

我的网站上有一个我正在处理的登录表单。问题是整个事情只是变大。它位于我页面的右上角，标题位于中间，菜单栏位于左上角。与头部和菜单栏相比，它占用了大量空间。我已经摆弄了css和html代码了一段时间了，但我无法弄清楚如何制作“字段”或用于编写密码和用户名更小的框。有什么建议？

    form {
    	float:right;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    .login {
    	position: absolute;
    	top: 10px;
    	right: 25px;
    	font-size: 50%;
    	display: inline-block;
    }

    <form>
    <span class='login'>
    
    <label for="E-mail">E-mail</label>
    <input name="Email" placeholder="E-mail" id="E-mail" />
    
    <label for="Password">Password</label>
    <input type="password" placeholder="Password" id="Password" />
    
    <input type="submit" value="Log in" />
    </span> 
    </form>

Answer 1

尝试使用类似的内容：

input {
    width: 50%;
}

您还可以仅使用以下内容定位文本类型输入字段：

input[type=text] {
  ...
}

Answer 2

首先将<span class='login'>更改为<div class='login'>，这对于此用途来说并不是很好。并添加以下样式：

  form{
     width: 100vw;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
  }

  .login{
     width: 50%; /* or any thing you need*/
     font-size: 50%; 
  }

  .login input[type=password]{font-size: 10px; /* or any thing you need*/}

如何缩小此登录表单？

2 个答案: