如何修复我的表单以始终可见？答案

【问题标题】：How do I fix my form to be visible at all times?如何修复我的表单以始终可见？
【发布时间】：2021-07-17 03:56:31
【问题描述】：

我一直在尝试不同的位置并更改高度和宽度所需的单位，以使我的表单始终位于中心。不幸的是，大多数时候我的输入元素向左移动，而文本保持在中心对齐。此外，我希望我的表单在不同的分辨率下完全可见，并且更改语言的按钮始终位于同一位置（左上或右上）。如果您有任何建议，我将非常感谢您的想法。

body {
    height: 100%;
    width: 100%;
    padding: 0;
    background-color: #8102f7;
    margin: 0;
    font-family: sans-serif;
} 

.login-form {
    display: inline-block;
    width: 600px;
    height: auto;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}

p {
    color: #fff;
    font-size: 200%;
    letter-spacing: 3px;
    text-align: center;
    

}

.user {
    background-color: transparent;
    border: none;
    border-bottom: 3px solid #fff;
    outline: none;
    padding-bottom: 0px;
    text-align: center;
    color: #fff;
    font-weight: 100;
    font-size: 200%;
    letter-spacing: 3px;
    width: 600px;
}

.botName {

  background-color: transparent;
  border: none;
  border-bottom: 3px solid #fff;
  outline: none;
  padding-bottom: 0px;
  text-align: center;
  width: 600px;
  color: #fff;
  font-weight: 100;
  font-size: 200%;
  letter-spacing: 3px;
  
}

.changeLang {
    position: fixed;
    background-color: transparent;
    color: white;
    border: none;
    height: 50px;
    font-size: 150%;
    letter-spacing: 3px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello!</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="/styleMisho.css" />
  
    
</head>
<body>
  <button class="changeLang" id="changeLang">Tiếng Việt</button>
  
  <div class="login-form">
    <form method="POST">
      <p>What is your name?</p>
      <input type="text" class="user" placeholder="">
      <p>What is your bot's name?</p>
      <input type="text" class="botName" placeholder="">
      </form>
  </div>


    



  <script src="jsonAndButton.js"> </script>
</body>
</html>

【问题讨论】：

标签： html css responsive

【解决方案1】：

只需将font-size: 62.5%; 添加到body 样式即可。（阅读this 了解为什么使用 62.5%）

body {
  height: 100%;
  width: 100%;
  padding: 0;
  background-color: #8102f7;
  margin: 0;
  font-family: sans-serif;
  font-size: 62.5%;
}

.login-form {
  display: inline-block;
  width: 600px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

p {
  color: #fff;
  font-size: 200%;
  letter-spacing: 3px;
  text-align: center;
}

.user {
  background-color: transparent;
  border: none;
  border-bottom: 3px solid #fff;
  outline: none;
  padding-bottom: 0px;
  text-align: center;
  color: #fff;
  font-weight: 100;
  font-size: 200%;
  letter-spacing: 3px;
  width: 600px;
}

.botName {
  background-color: transparent;
  border: none;
  border-bottom: 3px solid #fff;
  outline: none;
  padding-bottom: 0px;
  text-align: center;
  width: 600px;
  color: #fff;
  font-weight: 100;
  font-size: 200%;
  letter-spacing: 3px;
}

.changeLang {
  position: fixed;
  background-color: transparent;
  color: white;
  border: none;
  height: 50px;
  font-size: 150%;
  letter-spacing: 3px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hello!</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" href="/styleMisho.css" />


</head>

<body>
  <button class="changeLang" id="changeLang">Tiếng Việt</button>

  <div class="login-form">
    <form method="POST">
      <p>What is your name?</p>
      <input type="text" class="user" placeholder="">
      <p>What is your bot's name?</p>
      <input type="text" class="botName" placeholder="">
    </form>
  </div>






  <script src="jsonAndButton.js">
  </script>
</body>

</html>

【讨论】：

您可以继续在元素上使用rem 单位而不是px 或百分比。