Question

我正在尝试使用CSS flexbox构建一个resposive表单。

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

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

为了做到这一点，我把标题，输入和单独的容器放在一起。

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

你知道如何解决这个问题吗？请参阅下面的代码。

THX！（：

Select *, Mid([XX0000NumberField], 3) As NumberOnlyID
From YourTable

Answer 1

我不确定你的意思是“正确对齐”。但是，如果您希望左栏中的文本框和右侧的“标签”，而不更改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元素没有效果，它只是为文本提供所需的类：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创建响应式表单

2 个答案: