如何以 CSS 和 HTML 形式將兩個元素放在一起並在下一行中放置下一個元素？
[英]How to place two elements together and next element in next line in form CSS and HTML?
問題描述
我是 HTML,CSS,JavaScript 的初學者
我希望將“輸入用戶名”框和“確定”圖像放在一起，確定圖像應該在輸入框旁邊，下一個元素在下一行。
.check1 { display: inline; margin-right: -4px; float: inline-end; }.check2 { display: inline; margin-right: -4px; float: inline-start; }.login-form { margin: 50px auto; width: 300px; font-family: Tahoma, Geneva, sans-serif; }.login-form h2 { text-align: left; color: rgb(124, 34, 105); }.login-form input{ width: 100%; padding: 15px 15px 15px 15px; margin: 10px 0 10px 0px; box-sizing: border-box; outline-color: rgb(38, 179, 235); }.login-form button{ width: 100%; border: none; cursor: pointer; padding: 15px; background-color: rgb(148, 53, 127); color: white; box-sizing: border-box; outline: none; }.login-form button:hover { opacity: 90%; } #username { width: 20px; height: 20px; } #password { width: 20px; height: 20px; }
<.DOCTYPE html> <html> <head> <title>Welcome</title> <link rel="stylesheet" href="css/main.css"/ > </head> <body> <div class="login-form"> <h2>Student Record Management</h2> <form action="auth" method="POST"> <div class="check1"> <img id="username" src="ok.png" alt="ok"> <input type="text" name="userid" placeholder="Enter Username" required autofocus autocomplete="off" / > </div> <div class="check2"> <input type="password" name="password" placeholder="Enter Password" required / > <img id="password" src="wrong.png" alt="wrong"> <div> <button type="submit">Login</button> <label><pre>Create account <a href="signup.html">here</a></pre></label> </form> </div> </body> </html>
下一個元素應該在下一行，並且框和圖像應該在同一行。
如果有人告訴我如何訪問 JavaScript 中的 HTML 元素，將不勝感激。
2 個解決方案
解決方案1
1 已采納 2021-05-25 13:49:23
此代碼會將輸入框和 ok 圖像對齊為內聯元素。
.check1 {
display: flex;
flex-direction: row-reverse;
margin-right: -4px;
float: inline-end;
}
解決方案2
1 2021-05-25 13:59:25
你能檢查下面的代碼嗎？ 希望它對你有用。 我們在 check1 和 check2 中使用了display:flex並根據您的要求對input元素應用了 margin-right
請參考此鏈接： https://jsfiddle.net/yudizsolutions/vpr7qLy6/
.check1, .check2 { display: flex; margin-right: -4px; align-items: center; }.login-form { margin: 50px auto; width: 300px; font-family: Tahoma, Geneva, sans-serif; }.login-form h2 { text-align: left; color: rgb(124, 34, 105); }.login-form input { width: 100%; padding: 15px 15px 15px 15px; margin: 10px 10px 10px 0px; box-sizing: border-box; outline-color: rgb(38, 179, 235); }.login-form button { width: 100%; border: none; cursor: pointer; padding: 15px; background-color: rgb(148, 53, 127); color: white; box-sizing: border-box; outline: none; }.login-form button:hover { opacity: 90%; } #username { width: 20px; height: 20px; } #password { width: 20px; height: 20px; }
<.DOCTYPE html> <html> <head> <title>Welcome</title> <link rel="stylesheet" href="css/main:css" /> </head> <body> <div class="login-form"> <h2>Student Record Management</h2> <form action="auth" method="POST"> <div class="check1"> <input type="text" name="userid" placeholder="Enter Username" required autofocus autocomplete="off" /> <img id="username" src="https.//via.placeholder?com/60x60:text=ok" alt="ok"> </div> <div class="check2"> <input type="password" name="password" placeholder="Enter Password" required /> <img id="password" src="https.//via.placeholder?com/60x60.text=wrong" alt="wrong"> </div> <button type="submit">Login</button> <label><pre>Create account <a href="signup.html">here</a></pre></label> </form> </div> </body> </html>
如何復制 HTML5 CANVAS 標簽上的線段旋轉並將其放置在原始線段旁邊？
[英]How do I copy line segment on HTML5 CANVAS tag rotate it and place it next to the original segment?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.