时间戳

首页 > 解决方案 > 如何使 div 元素显示为与列的 flex 方向内联？

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

问题描述

我试图将文本输入与 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>

标签： htmlcssreactjs

解决方案

那是因为h1它是一个块元素，并且由于它在一个未设置样式的 div 中，它会将它推入input一个新行。

如果你将和div包装成 flexbox，它看起来与图像类似：h1input

.contactusinput div {
  display: flex;
}

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

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

h1 {
  min-width: 200px;
}

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

这是一个jsFiddle

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

推荐阅读