Question

我有一个媒体查询，当屏幕低于550px时，我的容器的宽度变为90％；当密码生成器溢出时，容器的宽度变为90px（而不是90％）。我怎样才能解决这个问题？当我选择密码选项之一并将长度设置为50时，就会发生溢出。

Answer 1

这个网站的确让我的眼睛有些不适，

这是因为您在身体上使用flexbox来解决此问题：

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
body,
html {
    padding: 0;
    margin: 0;
    background-color: blueviolet;
    font-family: "Poppins", sans-serif;
    color: black;
    font-weight: 700;
}
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
h2 {
    text-align: center;
    font-size: 1.1em;
}
#generatorContainer {
    width: 90%;
    border: 2px solid white;
    background-color: rgb(50, 64, 168);
    padding: 0.5em;
}
#passwordContainer {
    border-radius: 0.5em;
    background-color: #3399ff;
    overflow: auto;
}
.passwordFeaturesContainer {
    display: flex;
    justify-content: space-between;
    margin: 0.5em 0;
}
#generatePasswordButton {
    margin: 0 auto;
    width: 80%;
    display: block;
    height: 60px;
}
#generatePasswordButton {
    cursor: pointer;
    background-color: rgb(50, 168, 52);
    outline: none;
    box-shadow: none;
    color: rgb(50, 64, 168);
    font-size: 1.2em;
    font-weight: 700;
}
@media only screen and (min-width: 551px){
    #generatorContainer {
        
    width: 500px;
    }
}

<html lang="en"><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Password Generator</title>
        <!-- custom css -->
        <link rel="stylesheet" href="style.css">
         <!-- favicon -->
         <link rel="shortcut icon" type="image/png" href="favicon.png">
    <script data-dapp-detection="">
(function() {
  let alreadyInsertedMetaTag = false

  function __insertDappDetected() {
    if (!alreadyInsertedMetaTag) {
      const meta = document.createElement('meta')
      meta.name = 'dapp-detected'
      document.head.appendChild(meta)
      alreadyInsertedMetaTag = true
    }
  }

  if (window.hasOwnProperty('web3')) {
    // Note a closure can't be used for this var because some sites like
    // www.wnyc.org do a second script execution via eval for some reason.
    window.__disableDappDetectionInsertion = true
    // Likely oldWeb3 is undefined and it has a property only because
    // we defined it. Some sites like wnyc.org are evaling all scripts
    // that exist again, so this is protection against multiple calls.
    if (window.web3 === undefined) {
      return
    }
    __insertDappDetected()
  } else {
    var oldWeb3 = window.web3
    Object.defineProperty(window, 'web3', {
      configurable: true,
      set: function (val) {
        if (!window.__disableDappDetectionInsertion)
          __insertDappDetected()
        oldWeb3 = val
      },
      get: function () {
        if (!window.__disableDappDetectionInsertion)
          __insertDappDetected()
        return oldWeb3
      }
    })
  }
})()</script></head>
    <body>
    <div class="flex">
        <form id="generatorContainer">
            <div id="passwordContainer">
                <h2>Password Generator</h2>
            </div>
            <div class="passwordFeaturesContainer">
                <label for="passLength">Password Length</label>
                <input type="number" step="1" min="4" max="50" id="passLength" required="">
            </div>
            <div class="passwordFeaturesContainer">
                <label for="lowerCase">Contain Lowercase Letters</label>
                <input type="checkbox" id="lowerCase" required="">
            </div>
            <div class="passwordFeaturesContainer">
                <label for="upperCase">Contain Uppercase Letters</label>
                <input type="checkbox" id="upperCase" required="">
            </div>
            <div class="passwordFeaturesContainer">
                <label for="numbers">Contain Numbers</label>
                <input type="checkbox" id="numbers" required="">
            </div>
            <div class="passwordFeaturesContainer">
                <label for="symbols">Contain Symbols</label>
                <input type="checkbox" id="symbols" required="">
            </div>
            <button type="submit" id="generatePasswordButton">Generate Password</button>
        </form>
        </div>
        <script src="main.js"></script>
    
</body></html>

我在生成器周围添加了一个flex div，还为flex添加了一个类...尝试避免对标准生成的元素（如html，body，script等）进行太多样式设置。请尝试从移动角度（大多数网络用户通常是移动用户），因此请使用 min-width：551px; ，而不是使用具有最大宽度的媒体查询；最终，您不需要使用媒体查询。如果您仅在 #generatorContainer 上使用 max-width：500px; 就足够了。

编码愉快！

为什么溢出会覆盖父容器的宽度？

1 个答案: