html - 当我在网络浏览器中还原时，对齐方式发生更改或重叠

当我还原浏览器时，我的html页面div元素被更改，但是当我最大化它时，它可以正常工作。
当我单击密码字段时，会显示一个弹出窗口以验证密码的复杂性，并且每次在全屏模式下都会显示在密码字段旁边，但是当我在还原模式下单击密码字段时，它将重叠。
我希望它在还原模式下也显示在密码字段旁边，以及它在全屏模式下的工作方式。
请帮忙

请在下面找到附带的HTML和CSS代码。

    var check = function() {
      if (document.getElementById('psw').value ==
        document.getElementById('confirmPassword').value) {
        document.getElementById('info').style.color = 'green';
        document.getElementById('info').innerHTML = 'Matching';
      } else {
        document.getElementById('info').style.color = 'red';
        document.getElementById('info').innerHTML = 'Not Matching';
      }
    }

    function myFunction() {
      var x = document.getElementById("psw"), y = document.getElementById("confirmPassword");
      if (x.type === "password") {
        x.type = "text";
    	y.type = "text";
      } else {
        x.type = "password";
    	y.type = "password";
      }
    }

    var psw = document.getElementById("psw");
    var letter = document.getElementById("letter");
    var capital = document.getElementById("capital");
    var number = document.getElementById("number");
    var length = document.getElementById("length");
    var symbol = document.getElementById("symbol");

    // When the user clicks on the password field, show the message box
    psw.onfocus = function() {
      document.getElementById("message").style.display = "block";
    }

    // When the user clicks outside of the password field, hide the message box
    psw.onblur = function() {
      document.getElementById("message").style.display = "none";
    }

    // When the user starts to type something inside the password field
    psw.onkeyup = function() {
      // Validate lowercase letters
      var lowerCaseLetters = /[a-z]/g;
      if(psw.value.match(lowerCaseLetters)) {
        letter.classList.remove("invalid");
        letter.classList.add("valid");
      } else {
        letter.classList.remove("valid");
        letter.classList.add("invalid");
      }

      // Validate capital letters
      var upperCaseLetters = /[A-Z]/g;
      if(psw.value.match(upperCaseLetters)) {
        capital.classList.remove("invalid");
        capital.classList.add("valid");
      } else {
        capital.classList.remove("valid");
        capital.classList.add("invalid");
      }

      // Validate numbers
      var numbers = /[0-9]/g;
      if(psw.value.match(numbers)) {
        number.classList.remove("invalid");
        number.classList.add("valid");
      } else {
        number.classList.remove("valid");
        number.classList.add("invalid");
      }

      // Validate length
      if(psw.value.length >= 8) {
        length.classList.remove("invalid");
        length.classList.add("valid");
      } else {
        length.classList.remove("valid");
        length.classList.add("invalid");
      }

      // Validate Symbols
    	var symbols = /[-!$%^&*()_+|~=`{}[:;<>?,.@#\]]/g;
    	if(psw.value.match(symbols)) {
        symbol.classList.remove("invalid");
        symbol.classList.add("valid");
      } else {
        symbol.classList.remove("valid");
        symbol.classList.add("invalid");
      }
    }

/* Style all input fields */
input {
  width: 25%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 6px;
}

#myForm select
{
  width: 25%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}


/* Style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
}

/* Style the container for inputs */
.container {
  background-color: #f1f1f1;
  padding: 20px;
}

/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  float: left;
  background: transparent;
  color: #000;
  position: absolute;
  right: 0;
  padding: -2000px;
  margin-top: -120px;
  margin-right: 200px;
}

#message p {
  padding: 1px 35px;
  font-size: 14px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -35px;
  content: "?";
}

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body bgcolor="#dbddea">

    <h2 align="center"><u>Password Change</u></h2>
    <p align="center"><marquee><h3>Change the password for unix users.</h3></marquee></p>

    <div class="container">
      <form>
    	<div id=myForm align = "center">
        <label for="usrname">Select Username</label><br>
    	<select name="Users">
    	<option value="test1">test1</option>
        <option value="test2">test2</option>
    	</select>
    	</div>
    	<div align= "center">
        <input type="password" id="psw" name="psw" onkeyup='check();' placeholder="New Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*_=+-]).{8,}" title="Must contain at least one number, one symbol and one uppercase and lowercase letter, and at least 8 or more characters" required>
        <br>
    	<div id="message" align = "left">
    	<h4>Password must contain the following:</h4>
    	<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
    	<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
    	<p id="number" class="invalid">A <b>number</b></p>
    	<p id="length" class="invalid">Minimum <b>8 characters</b></p>
    	<p id="symbol" class="invalid">A <b>symbol</b></p>
    	</div>
    	<input type="password" id="confirmPassword" name="confirmPassword" onkeyup='check();' placeholder="Re-type Password" title="Confirm new password" required>
    	<br>
    	<span id='info'></span>

    	<input type="checkbox" onclick="myFunction()" style="width: 40px;">Show Password
    	</div>
    	<div align = "center">
        <input type="submit" id="submit" value="Change Password">
    	</div>
      </form>
    </div>

    </body>
    </html>

最佳答案

请添加此代码。

的CSS

@media only screen and (max-width: 1280px) {
    #message {
        position: relative;
        float: none;
        margin: 0;
        width: 25%;
    }
}

关于html - 当我在网络浏览器中还原时，对齐方式发生更改或重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57356161/