表单不响应 window 大小调整

Question

我正在重新创建一个苹果登录页面。但有一个问题，表单输入没有响应。调整 window 大小时，背景会更改以适合 window，但登录表单不会。这是我的代码，html 和 css.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.login {
    position: absolute; /* Turns the the text box to absolute from static (allows free control of placement) */
    width: 1140px;
    top: 30%;
    left: 500;
    height: auto;
    font-size: 23pt;
}

#space-password {
    padding-top: 20px;
}

html {
    color: whitesmoke;
    font-weight: 100;
    font-family: 'Lato', 'Arial', sans-serif;
    text-rendering: optimizeLegibility; 
}

input{
    border-radius: 50px;
    color: aliceblue;
    background-color: #34495e;
}

这里是 html:

<!DOCTYPE>
<html lan="en">
    <head>
        <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400"     rel="stylesheet">
        <title>Welcome-Sign in</title>

    </head>
    <body>
        <header>
            <form class="login">
                <p>Apple ID:</p><br>
                <input type="text" name="Apple ID"><br>
                <p id="space-password">Password:</p><br>
                <input type="password" name="Password">
            </form>

        </header>
    </body>
</html>

编辑：你们所有的解决方案都在工作，现在输入框的宽度填满了整个屏幕！无论如何要阻止这个？

Answer 1

replace this css

      * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}

.login {
 position: absolute; /* Turns the the text box to absolute from static (allows free control of placement) */
width: auto;
top: 30%;
left: 0;
right:0;
 margin:0 auto;
height: auto;
font-size: 23pt;
}
.login p{ text-align:left}
#space-password {
padding-top: 20px;
}

html {
  color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility; 
}

input{
border-radius: 50px;
color: aliceblue;
background-color: #34495e;
width:100%;
}

Answer 2

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}

.login {
width:50%;
 margin:0 auto;
height: auto;
font-size: 23pt;
}
.login p{ text-align:left}
#space-password {
padding-top: 20px;
}

html {
  color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility; 
}

input{
border-radius: 50px;
color: aliceblue;
background-color: #34495e;
width:80%;
}

<!DOCTYPE>
    <html lan="en">
    <head>
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400"     rel="stylesheet">
    <title>Welcome-Sign in</title>

</head>
<body>
    <header>
        <form class="login">
            <p>Apple ID:</p><br>
            <input type="text" name="Apple ID"><br>
            <p id="space-password">Password:</p><br>
            <input type="password" name="Password">
        </form>

    </header>



</body>
</html>

Answer 3

将 width: 1140px; 更改为 width: 100% 或 width:80%（您的愿望）.. 基本上是响应式将所有参数值设置为 %（百分比）。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}

.login {
 position: absolute; /* Turns the the text box to absolute from static (allows free control of placement) */
width: auto;
top:10%;
left: 10%;
right:0;
 margin:0 auto;
height: auto;
font-size: 23pt;
}
.login p{ text-align:left}
#space-password {
padding-top: 20px;
}

html {
  color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility; 
}

input{
border-radius: 50px;
color: aliceblue;
background-color: #34495e;
width:80%;
}

<!DOCTYPE>
    <html lan="en">
    <head>
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400"     rel="stylesheet">
    <title>Welcome-Sign in</title>

</head>
<body>
    <header>
        <form class="login">
            <p>Apple ID:</p><br>
            <input type="text" name="Apple ID"><br>
            <p id="space-password">Password:</p><br>
            <input type="password" name="Password">
        </form>

    </header>



</body>
</html>

Answer 4

您应该使用具有属性 min-width: ZZZpx 和 max-width: YYYpx 的 width: 80%。这将使您的表单成为 body 的 80%，但如果小屏幕使表单小于 ZZZpx，表单宽度将保持不变 (ZZZpx)。此外，如果大屏幕使表单大于 YYYpx，则表单宽度将保持不变（YYYpx）。 margin/padding: 0 auto是水平居中

要计算 ZZZ 和 YYY，您应该测试一些屏幕尺寸，看看最小值是多少。和最大。值。

最后，我建议您将 css 中的 html {} 更改为 body {}；添加 max-width 和 min-width 属性。

这可能是您的代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    
header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
    background-size: cover;
    background-position: center;
    height: 100vh;
}
.login {
    /* Quit also this */
    /*
    position: absolute;
    top:10%;
    left: 10%;
    right:0;        
    width: auto;
    margin:0 auto;
    height: auto;
    */
    padding-top: 10%;
    padding-left: 10%;
    font-size: 23pt;
}

.login p{ 
    text-align:left
}

#space-password {
    padding-top: 20px;
}

body {
    color: whitesmoke;
    font-weight: 100;
    font-family: 'Lato', 'Arial', sans-serif;
    text-rendering: optimizeLegibility; 

    width: 90%;
    margin: 0 auto;
    min-width: 1220px;
    max-width: 1600px;
}

input{
    border-radius: 50px;
    color: aliceblue;
    background-color: #34495e;

    width:80%;
    min-width: 800px;
    max-width: 1400px;
    margin: 0 auto;
}

<!DOCTYPE>
    <html lan="en">
    <head>
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400"     rel="stylesheet">
    <title>Welcome-Sign in</title>

</head>
<body>
    <header>
        <form class="login">
            <p>Apple ID:</p><br>
            <input type="text" name="Apple ID"><br>
            <p id="space-password">Password:</p><br>
            <input type="password" name="Password">
        </form>

    </header>



</body>
</html>

Answer 5

您的 .login class css 属性中缺少 max-width ].而 width 应该是 100%.

jsfiddle.net/raeeshalam/ao7j0us5/

Answer 6

我认为这段代码有助于您更好地理解。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
  background-size: cover;
  background-position: center;
  height: 100vh;
}
.login {
  position: absolute; /* Turns the the text box to absolute from static (allows free control of placement) */
  width: 100%;
  max-width: 420px;
  top: 30%;
  left: 0px;
  right: 0px;
  height: auto;
  font-size: 20pt;
  margin: 0px auto;
  padding: 15px;
}
#space-password {
  padding-top: 20px;
}
html {
  color: whitesmoke;
  font-weight: 100;
  font-family: 'Lato', 'Arial', sans-serif;
  text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
}

input{
  border-radius: 50px;
  height: 38px;
  width: 100%;
  color: aliceblue;
  border: 2px solid #999;
  background-color: #34495e;
  box-sizing: border-box;
  padding-left: 14px;
  padding-right: 14px;
  margin-top: 5px;
  font-size: 17px;
}

<header>
  <form class="login">
    <p>Apple ID:</p>
    <input type="text" name="Apple ID">

    <p id="space-password">Password:</p>
    <input type="password" name="Password">
  </form>
</header>

表单不响应 window 大小调整

Form is not responsive to window resizing

html

css

forms

input

styling