python - 如何在CSS中水平显示输入表单？

Question

我正在尝试在 flask python 中设置表单样式..而不是垂直我想以水平方式显示表单..我尝试在 CSS 中显示:内联但对我不起作用..如何以水平方式显示表单输入方式..任何帮助将不胜感激..提前致谢..

    <div class="container">
    <div class="jumbotron">
    <form class="form-signin" action="/validateLogin" method="post">
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password">
    <button id="btnSignIn" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
    </div>

    <footer class="footer">
    </footer>

    </div>

CSS:

.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signint .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
        box-sizing: border-box;
padding: 10px;
font-size: 16px;
}

.form-signin .form-control: focus {
z-index: 2;
}
.form-signin {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-siginin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

Answer 1

您可以在 flexbox 的帮助下直接实现这一点。在此之前，您必须将关联的标签和输入元素分组到包装器 div 中，以便它们可以成为 flex 元素。最后，调整.form-signin的宽度，设置其显示为flex

.form-signin {
  padding: 15px;
  margin: 0 auto;
  display: flex;
}

.form-signin .form-signin-heading,
.form-signint .checkbox {
  margin-bottom: 10px;
}

.form-signin .checkbox {
  font-weight: normal;
}

.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}

.form-signin .form-control: focus {
  z-index: 2;
}

.form-signin {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-siginin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

<form class="form-signin" action="/validateLogin" method="post">
  <div>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
  </div>

  <div>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password">
  </div>

  <button id="btnSignIn" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>