Question

我正在尝试在烧瓶python中设置表单样式。.而不是垂直，我想以水平方式显示表单。.我尝试了在CSS中使用display：inline但对我不起作用..如何在水平方向显示表单输入方式..任何帮助将不胜感激..提前感谢..

    <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中，以便它们可以成为弹性项目。最后，调整.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>

Answer 2

您可以通过将CSS的float属性设置为left来创建此类表单：

.form-signin {
  padding: 15px;
  float: left;
  margin: 2px;
}

<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>

Check it out here

Answer 3

保持样式更改如下所示的html代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-signin row" action="/validateLogin" method="post">
  <div class="col-sm-4">
    <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 class="col-sm-4">
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password">
  </div>
<div class="col-sm-4">
  <button id="btnSignIn" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</div>
</form>

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

3 个答案: