如何使 div 元素显示为与列的 flex 方向内联？答案

【问题标题】：How to make div elements appear inline with a flex direction of column?如何使 div 元素显示为与列的 flex 方向内联？
【发布时间】：2020-10-15 00:10:51
【问题描述】：

我试图将文本输入与 h1 标记内联在同一行，然后将其显示为列的 flex-direction。但它似乎只想将所有输入设置在一行中，并且 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>

【问题讨论】：

标签： html css reactjs

【解决方案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 作为弹性框，它将看起来类似于图像：

.contactusinput div {
  display: flex;
}

你不需要任何父母的 flexbox 来工作。

要将输入推送到同一行，您可以将min-width 添加到h1：

h1 {
  min-width: 200px;
}

您需要对较小的屏幕应用不同的样式，可能会删除 min-width 并在列而不是行中显示 h1。

这是jsFiddle

顺便说一下，标题元素h1-h6 不是为此而设计的。您通常希望在整个站点中只有一个h1。在这里使用的更好选择是label。

【讨论】：

【解决方案3】：

要做出你想要的设计，需要在包含input和h1的div上设置flexbox。

所以在这种情况下，将有 3 个 div 具有弹性盒设计，它们都是 .contactusinput 选择器的直接子代。

所以在style上，你可以将.contactusinput > div（.contactusselector的直接div子级）样式设置为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>

【讨论】：

太棒了。谢谢！