Question

当我尝试使用JS显示隐藏内容（单击登录按钮时登录公式）时，我的公式会变形。尤其是“注册”按钮太长，我无法正确定位问题。当我在＃login-fenster中删除JS和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使它变形。

Answer 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;（我仍然强烈建议您摆脱{ {1}} ...根本无济于事），只需将width属性设置为父级div（白框）的100％。

height: 30vh;

如何防止JS使div容器变形？

1 个答案: