如何防止JS使div容器變形？
[英]How to prevent JS from deforming my div-Container?
問題描述
當我嘗試使用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使它變形。
1 個解決方案
解決方案1
0 已采納 2019-03-28 21:19:04
感謝您的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; ...一點都height: 30vh; ），然后將width屬性設置為parent-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 />
如何通過div容器將多個數據從自動完成（JQuery UI）傳輸到數組？
[英]How to transfer multiple data from autocomplete (JQuery UI) to an array via a div-container?
可滾動div容器中的href-鏈接不起作用會跳到容器頂部
[英]href in scrollable div-container - link not working jumps to top of container
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.