如何以 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 元素
将不胜感激。
此代码会将输入框和 ok 图像作为内联元素对齐。
.check1 {
display: flex;
flex-direction: row-reverse;
margin-right: -4px;
float: inline-end;
}
你能检查一下下面的代码吗?希望它对你有用。我们在 check1 和 check2 中使用了 display:flex
并根据您的要求将 margin-right 应用于 input
元素
请参考这个link: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>
我是 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 元素 将不胜感激。
此代码会将输入框和 ok 图像作为内联元素对齐。
.check1 {
display: flex;
flex-direction: row-reverse;
margin-right: -4px;
float: inline-end;
}
你能检查一下下面的代码吗?希望它对你有用。我们在 check1 和 check2 中使用了 display:flex
并根据您的要求将 margin-right 应用于 input
元素
请参考这个link: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>