使用 CSS flexbox 创建响应式表单

Question

我正在尝试使用 CSS flexbox 构建响应式表单。

我希望每个输入的标题和输入本身在同一行。

我正在尝试对齐表单，以便输入位于同一垂直线上，并且标题将始终向右对齐（请参阅下面的代码）

In-order 为此，我将标题和输入放在单独的容器中。

我的问题是因为输入高于标题，几行后表格不再直。

你知道怎么解决吗？请参阅下面的代码。

谢谢！ (:

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<style>
.parent
{
    border: 5px solid lightcoral;
    display: flex;

}


.child
{
    display: flex;

    text-align: center;
    flex-direction:column;
    max-width:300px;

}


.item{

    display: flex;
    margin:5px;
    text-align: center;
    margin-left: auto;

}
.item-input{

    margin:5px;
    display: flex;
    text-align: center;
    box-sizing: border-box;

}

@media screen and (max-width: 1200px) {
    .parent {
        justify-content:left;
    }
}

@media screen and (min-width: 1200px) {
    .parent {
        justify-content:center;
    }
}


</style>
<div class="parent">
<div class="child">
<div class="item">Name</div>
<div class="item">Age</div>
<div class="item">Country</div>
<div class="item">Email</div>





</div>
<div class="child">
<div class="item-input"><input type=text></div>
<div class="item-input"><input type=text></div>
<div class="item-input"><input type=text></div>
<div class="item-input"><input type=text></div>




</div>
</div>

</div>
</htmL>

Answer 1

我不确定 "aligning to the right" 是什么意思。但是如果你想在左栏中有文本框而在右栏中有 "labels"，而不改变 html，你可以使用 order.

.parent {
  border: 5px solid lightcoral;
  text-align: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  text-align: center;
  flex-direction: column;
  max-width: 300px;
  align-content: right;
}

.parent .child:first-child {
  order: 1; /*added*/
}

.item {
  display: flex;
  margin: 5px;
  text-align: center;
  /*margin-left: auto;*/
}

.item-input {
  margin: 5px;
  display: flex;
  text-align: center;
  box-sizing: border-box;
}

@media screen and (max-width: 1200px) {
  .parent {
    justify-content: flex-start; /*"left" is not recognized by Chrome*/
  }
}

<div class="parent">
  <div class="child">
    <div class="item">Name</div>
    <div class="item">Age</div>
    <div class="item">Country</div>
    <div class="item">Email</div>
  </div>
  
  <div class="child">
    <div class="item-input">
      <input type=text>
    </div>
    <div class="item-input">
      <input type=text>
    </div>
    <div class="item-input">
      <input type=text>
    </div>
    <div class="item-input">
      <input type=text>
    </div>

  </div>
</div>

Answer 2

给你:) span 元素没有效果，它只是一种给文本一个你想要的 class 的方法 :p

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<style>
.parent
{
    border: 5px solid lightcoral;
    text-align:center;
    display: flex;
    justify-content:center;


}


.child
{
    display: flex;

    text-align: center;
    flex-direction:column;
    max-width:300px;
    align-content: right;

}


.item{

    display: flex;
    margin:5px;
    text-align: center;
    margin-left: auto;

}
.item-input{

    margin:5px;
    display: flex;
    text-align: center;
    box-sizing: border-box;

}

@media screen and (max-width: 1200px) {
    .parent {
        justify-content:left;
    }
}


</style>
<div class="parent">

<div class="child">

<div class="item-input"><span class="item">Name </span><input type=text></div>
<div class="item-input"><span class="item">Age </span><input type=text></div>
<div class="item-input"><span class="item">Country </span><input type=text></div>
<div class="item-input"><span class="item">Email </span><input type=text></div>

</div>
</div>


</htmL>

使用 CSS flexbox 创建响应式表单

Create responsive form with CSS flexbox

html

css

flexbox

responsive