Блог

Главная - Вопросы по программированию - Как сделать так, чтобы элементы div отображались в строке с направлением flex столбца?

Как сделать так, чтобы элементы div отображались в строке с направлением flex столбца?

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

Я пытаюсь получить ввод текста в той же строке, что и встроенный тег h1, а затем отобразить его как гибкое направление столбца. Но, похоже, он хочет установить все входные данные в строке и с h1 сверху, а это не то, что я хочу.

Вот что я имею в виду. введите описание изображения здесь

вот желаемый результат: введите описание изображения здесь

 .contactuscontent{
          border: 1px solid pink;
          display: flex;
      }
    
    
    .contactusinput {
        display: inline-flex;
        flex-direction: column;
        border: 1px solid purple;
    }  
 <div class="contactuscontent">
          <div class="contactusinput">
            <div class="name"><h1>Name</h1> <input type="text"> </div>
            <div class="email"><h1>Email</h1> <input type="text"> </div>
            <div class="refer"><h1>How did you find us</h1> <input type="text"> </div>
          </div>
        </div>

Ответ №1:

Вы должны изучить семантику HTML, <h1> которая используется для заголовков.

Если вы хотите добавить метки для полей ввода, вы должны использовать <label for="..."> . Вы можете стилизовать любой тег любым удобным для вас способом, поэтому стиль по умолчанию не должен быть причиной для использования тега вообще.

 .contactuscontent {
  border: 1px solid pink;
  display: flex;
  justify-content: center;
}

.contactusinput {
  width: 400px;
  border: 1px solid purple;
}

.contactusinput>div {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.contactusinput label {
  width: 200px;
}

.contactusinput input,
.contactusinput textarea {
  width: 200px;
  padding: 3px;
  }  
 <div class="contactuscontent">
  <div class="contactusinput">
    <div class="name"><label for="name">Name</label> <input type="text" id="name" name="name"> </div>
    <div class="email"><label for="email">Email</label> <input type="text" id="email"> </div>
    <div class="refer"><label for="howtofind">How did you find us</label> <textarea id="howtofind"> </textarea> </div>
  </div>
</div>

Ответ №2:

Это потому h1 , что это блочный элемент, и поскольку он находится внутри не оформленного div, он вставит input его в новую строку.

Если вы создадите div , который обертывает h1 и input как flexbox, он будет выглядеть аналогично изображению:

 .contactusinput div {
  display: flex;
}

Вам не нужен flexbox ни на одном из родительских элементов, чтобы это работало.

Для ввода входных данных в одной строке вы можете добавить min-width h1 :

 h1 {
  min-width: 200px;
}

Вам нужно будет применить другой стиль к экранам меньшего размера, вероятно, удалив min-width и показав h1 в столбце вместо строки.

Вот jsFiddle

Кстати, элементы заголовка h1 — h6 не предназначены для этого. Обычно вы хотите иметь только один h1 на всем сайте. Лучшим вариантом для использования здесь будет label .

Ответ №3:

Чтобы создать желаемый дизайн, необходимо установить flexbox в div, который содержит input и h1 .

Итак, в этом случае будет 3 подразделения, которые будут иметь дизайн flexbox, и все они являются прямыми дочерними элементами .contactusinput selector.

Итак style , вы можете установить .contactusinput > div стиль (прямого дочернего элемента div .contactusselector ) flexbox следующим образом.

 .contactuscontent {
  border: 1px solid pink;
  display: flex;
}

.contactusinput {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid purple;
}

.contactusinput > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}  
 <div class="contactuscontent">
          <div class="contactusinput">
            <div class="name"><h1>Name</h1> <input type="text"> </div>
            <div class="email"><h1>Email</h1> <input type="text"> </div>
            <div class="refer"><h1>How did you find us</h1> <input type="text"> </div>
          </div>
        </div>

Комментарии:

1. Удивительные. Спасибо!