不知何故，当我尝试使用 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 使它变形。
最佳答案
感谢您提供的 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 />
关于javascript - 如何防止 JS 使我的 div-Container 变形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55406154/