Flexbox, вложенный во flexbox - сделать строку в столбце - PullRequest
Новая
       1

Flexbox, вложенный во flexbox - сделать строку в столбце

0 голосов
/ 09 января 2020

Я делаю фиктивную форму опроса и помещаю входные данные в flex-box столбца, но я хочу разделить поле имени между 'first' и 'last' и разделить их горизонтальное пространство. Я попытался заключить их в div и присвоить этому вложенному div свойство flex строки, но оно, похоже, переопределяется родительским flexbox, сохраняя их вертикально друг к другу. Как поставить поля ввода имени рядом? 

<html>
  <header>
    Survey Form
  </header>
  <body>
    <div class='container'>
      <div class='form'>
        <div class='inputCon'>
          <div class='name'>Name</div>
          <div class='firstLast'>
          <input
            type='text'
            name='FirstName'
            id='firstname'
            placeholder='Enter your name'
            required>
        </div>
        <input
            type='text'
            name='LastName'
            id='lastname'
            placeholder='Enter your name'
            required>
        </div>
      </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
    </div>
  </body>
</html>

<style>
  html {
  background-color: gray;
}

.container {
  margin: 10px auto 10px auto;
  height: 300px;
  width: 350px;
  display: flex;
  flex-direction: column;
}

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)),
  url(https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#name{
  width: 100%;
}
.inputCon{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 20 120 20 0;
  width: 100%;
}
.firstLast {
  display: flex;
  flex-direction: row;
}
input{
  width: 100%;
  text-align: center;
}


</style>

Ответы [ 2 ]

1 голос
/ 09 января 2020

Существует закрывающий тег </div> после ввода имени, который доставляет вам неприятности

0 голосов
/ 09 января 2020

Вы закрыли свой .firstLast div перед опцией фамилии. 

<html>
  <header>
    Survey Form
  </header>
  <body>
    <div class='container'>
      <div class='form'>
        <div class='inputCon'>
          <div class='name'>Name</div>
          <div class='firstLast'>
          <input
            type='text'
            name='FirstName'
            id='firstname'
            placeholder='Enter your name'
            required>
        <!-- You closed it here -->
        <input
            type='text'
            name='LastName'
            id='lastname'
            placeholder='Enter your name'
            required>
        </div> <!-- Should close here -->
        </div>
      </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
    </div>
  </body>
</html>

<style>
  html {
  background-color: gray;
}

.container {
  margin: 10px auto 10px auto;
  height: 300px;
  width: 350px;
  display: grid;
  //align-items: center;
  justify-content: center;
  background-color: #dddddd
}

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)),
  url(https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#name{
  width: 100%;
}
.inputCon{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 20 120 20 0;
  width: 100%;
}
.firstLast {
  display: flex;
  flex-direction: row;
}
input{
  width: 100%;
  text-align: center;
}


</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...