Как отобразить форму ввода горизонтально в CSS?

Question

я пытаюсь стилизовать форму в флеш-питоне .. вместо вертикальной я хочу показывать форму по горизонтали .. я пробовал показывать: встроенный в 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.Перед этим вам нужно сгруппировать связанные элементы label и input в оболочку 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>

Answer 2

сохраните этот 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>