如何防止 JS 变形我的 div-Container？答案

【问题标题】：How to prevent JS from deforming my div-Container?如何防止 JS 变形我的 div-Container？
【发布时间】：2019-08-19 17:29:53
【问题描述】：

不知何故，当我尝试使用 JS 显示隐藏内容（单击登录按钮时的登录公式）时，我的公式会变形。特别是“注册”按钮太长，我无法正确定位我的问题。当我删除 JS 和 #login-fenster 中的 display:none 属性时，它会按我的意愿显示。我试图将必要的代码复制到 JSfiddle，我希望它有效。到目前为止，我对响应式设计一无所知，所以我认为你必须最大化输出窗口。对不起！

我已经删除了代码的不同部分并试图定位问题，但只找到了与 JS 的连接

https://jsfiddle.net/vz2jfmkc/1/

function myFunction() {
  var x = document.getElementById("login-fenster");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

body, main{

    background-color: #000000;
    overflow-x: hidden;
}
nav {
    background: #0d0d0d;
    width: 100vw;
    top: 0;
    
}
.nav {
   display: flex;
    justify-content: flex-end;
    list-style: none;
    height: 3vw;
    text-align: center;
    align-items: center;
    padding: 0 2vw 0 0;
}
nav ul {
    padding: 0px;
    margin: 0;
    right: 0;   
}
nav ul li a {
    color: #fff;
    background-color: #262626;
    text-decoration: none;
    padding: 12px;
    font-size: 1.2rem;
    padding-right: 10px;
    border-radius: 5px 5px;
    border: #262626 1px solid;
    transition: 0.5s;
    transition: background 1s ease-in-out;
} 
 nav ul li a:hover {
     color: #ffffff;
     text-decoration: none;
     font-weight: 100;
     background: linear-gradient(#262626, #595959);
}
nav button {
    color: #fff;
    background-color: #262626;
    text-decoration: none;
    padding: 12px;
    font-size: 1.1rem;
    padding-right: 10px;
    border-radius: 5px 5px;
    border: #262626 1px solid;
    transition: 0.5s;
    transition: background 1s ease-in-out;
}
#login {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;

}
#login:active {
         transform: scale(0.9);
}
.news {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;
}
.news:active {
    transform: scale(0.9);
}
.tests {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;
}
.tests:active {
    transform: scale(0.9);
}
.community {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;
}   
.community:active {
    transform: scale(0.9);

}
.index {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;
}
.index:hover {
    transform: scale(0.9);
}
.search {
    margin-right: 1rem;
}
#login-fenster {
    right: 0;
    margin-top:  0rem;
    margin-right: 19rem;
    z-index: 100;
    justify-content: center;
    align-content: center;
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    height: 30vh;
    width: 18vw;
    background-color: black;
    color: white;
    position: absolute;
    border: 3px solid white;
    border-radius: 20px 20px;
    
}
.login-form {
    margin-top: 10px;
}
#login-fenster input[type="text"]{
    font-size: 1.3rem;
    border-radius: 8px 8px;
}
#login-fenster input[type="password"]{
    font-size: 1.3rem;    
    border-radius: 8px 8px;
}
.register {
    margin-top: 10px;
    background: #262626;
    border: 1px solid white;
    border-radius: 15px 15px;
    transition: transform all 0.2s;
}
.register a {
    text-decoration: none;
    color: white;
    font-size: 1.3rem;
    transition: transform all 0.2s;
}
.register:active {
    transform: scale(0.95);
}
button {
    cursor:  pointer;
    color: white;
    background-color: #262626;
    padding: 0.5rem;
    border-radius: 15px 15px;
    border: 1px solid white;
    font-size: 1rem;
    transition: transform 0.2s;
}
button:active {
    transform: scale(0.95);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Koop_bude</title>
        <link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen" />
    </head>
    <header>
         <nav>
            <ul class="nav">
                <button id="login" onclick="myFunction()">Login</button>
                <li class="news"><a href="news.html">News</a></li>
                <li class="tests"><a href="#">Tests</a></li>
                <li class="community"><a href="#">Community</a></li>
                <li class="search"><input type="search" placeholder="Suche..." /></li>
            </ul>
        </nav>
            <div id="login-fenster" style="display:none;">
                <input class="login-form" type="text" placeholder="Username" name="username" required />
                <input class="login-form" type="password" placeholder="Passwort" name="password" required />
                <button class="login-form" type="submit">Login</button>
                <label>
                    <input class="login-form" type="checkbox" checked="checked" name="remember">Eingeloggt bleiben
                </label>
            <div id="forgot-password">
                <button class="forgot-password-button">Passwort vergessen?</button>
            </div>
            <div class="register"><a href="#">Registrieren</a>
            </div>
            </div>
    </header>
    
    <body>
        <script>
        function myFunction() {
  			var x = document.getElementById("login-fenster");
  			if (x.style.display === "none") {
    		x.style.display = "block";
  			} else {
   			x.style.display = "none";
  }
}
        </script>
        </body>

我希望内容显示在登录按钮下方的一行中。我给了那些对新手来说看起来不错的内容特定参数，我不希望 JS 变形它。

【问题讨论】：

你可能会从这篇文章中得到一些线索，它显示了<input> 的大小如何被限制在周围的<div> 中。 stackoverflow.com/questions/11730468/…

标签： javascript html css

【解决方案1】：

感谢您提供的 JSFiddle - 尽管我仍然对您希望完成的工作感到有些困惑。据我了解，您的问题更像是 CSS 问题而不是 JavaScript 问题。如果您的问题是白色边框穿过您的内容：

然后删除

#login-fenster {
    ...etc...
    height: 30vh;     <----- Remove this to keep everything inside regarding Y-Axis
    width: 18vw;      <----- Remove this to keep everything inside regarding X-Axis
    ...etc...
}

现在您的所有项目将始终在您的白色边框内

如果您希望不同的输入字段位于不同的行，只需在您的输入之间添加一个<br /> 标签：

<input class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input class="login-form" type="password" placeholder="Passwort" name="password" required />

另一方面，如果您真的希望盒子扩大/缩小，并且想离开 width: 18vw;（我仍然强烈建议您摆脱 height: 30vh; ...这对您根本没有帮助）然后只需将宽度属性设置为父 div 的 100%（白框）。

<input style="width: 100%;" class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input style="width: 100%;" class="login-form" type="password" placeholder="Passwort" name="password" required />

【讨论】：

非常感谢您的详细回答！删除高度和宽度是正确的。但是，到目前为止，当我处理事情并进行响应式设计时，我应该放置宽度属性，但我可以并且应该省略高度属性。我做对了吗？
@Stuckz 是的 - 你是对的！我几乎不使用vh，忽略高度，vw 更常见。虽然......如果我在你的鞋子里，我不会担心让登录下拉菜单响应不同的屏幕尺寸。它不是一个足够大的屏幕元素来产生影响。 “响应式设计”并不是要让每个元素的大小都与屏幕成比例，而是要确保您的网站无论以何种尺寸查看都看起来不错。
@Stuckz 通常这意味着下拉菜单和弹出窗口不需要太多修复（如果有的话） - 相反，它通常最终会修复页面布局，以便它们浓缩成一个移动友好的订单，一个接一个。