Question

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

$header = array(
        'Firstname' => 'First Name',
        'Lastname' => 'Last Name',
        'Organization' => 'Organization',
        'Designation' => 'Designation',
        'Email' => 'Email',
        'Address' => 'Address',
        'City' => 'City',
    );
echo "<table>";

echo "<tr>";
foreach ($header as $head) {
    echo sprintf("<th>%s</th>",$head);
}
echo "</tr>";

$customResult = array();
$column = 1;
$row = 0;
foreach($candidates as $candidate)
{
    $customResult[$row][$candidate->field_name] = $candidate->field_value;
    if(++$column == 7){
        $row++;
    }
}

foreach ($customResult as $result) {
    echo "<tr>";
    foreach ($header as $field => $value) {
        echo sprintf("<td>%s</td>",$result[$field]);
    }
    echo "</tr>";
}

echo "</table>";

这是html：

* {
    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;
}

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

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

＆＃13;

* {
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%;
}

＆＃13;

<!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>

＆＃13;

Answer 3

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

＆＃13;

* {
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%;
}

＆＃13;

<!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>

＆＃13;

Answer 4

您应该将width: 80%与属性min-width: ZZZpx和max-width: YYYpx一起使用。这将使您的表单占您身体的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 类的css属性中缺少 max-width 。宽度应 100％。

<强> jsfiddle.net/raeeshalam/ao7j0us5 /

Answer 6

我认为这段代码可以帮助您更好地理解。

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

窗体不响应窗口大小调整

6 个答案: