如何以 CSS 和 HTML 形式将两个元素放在一起并在下一行中放置下一个元素？

Question

我是 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 元素将不胜感激。

Answer 1

此代码会将输入框和 ok 图像作为内联元素对齐。

.check1 {
    display: flex;
   flex-direction: row-reverse;
    margin-right: -4px;
    float: inline-end;
}

Answer 2

你能检查一下下面的代码吗？希望它对你有用。我们在 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>

如何以 CSS 和 HTML 形式将两个元素放在一起并在下一行中放置下一个元素？

How to place two elements together and next element in next line in form CSS and HTML?

javascript

html

css

forms

google-web-designer