我想对齐我的元素，以便它们从同一个地方开始（垂直）答案

【问题标题】：i want to align my elements so that they start in the same place (vertically)我想对齐我的元素，以便它们从同一个地方开始（垂直）
【发布时间】：2022-02-07 22:03:10
【问题描述】：

我尝试做一些 CSS，我有 4 个项目在一行中。我想对齐我的 2 个“sous-jacent de référence”，但我不知道该怎么做。我尝试使用position: relative，但没有用

这是我的代码：

body {
  background-color: rgb(0, 0, 0);
  text-align: center;
}

.title {
  color: white;
  border: 2px solid black;
  margin: 2%;
  padding-bottom: 2%;
}

.left {
  padding-left: 2%;
  float: left;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.left2 {
  padding-left: 2%;
  float: left;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.left3 {
  color: white;
  font-size: 20px;
  padding-top: 2%;
  position: absolute;
}

.right {
  float: left;
  padding-left: 30%;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.right2 {
  float: left;
  padding-left: 30%;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div class="title">
    <h2>Formulaire</h2>

  </div>

  <div class="left">
    typologie du produit
  </div>
  <div class="left2">
    <input type="text" id="typologie" name="typologie" required minlength="2" maxlength="50" size="10"> </div>
  <div class="right">
    Sous-jacent de référence
  </div>
  <div class="left2">
    <input type="text" id="Sous-jacent" name="Sous-jacent" required minlength="2" maxlength="50" size="10"> </div>

  <div class="left">
    Nom du produit


  </div>
  <div class="left2">
    <input type="text" id="typologie" name="typologi2" required minlength="2" maxlength="50" size="10"> </div>

  <div class="right">
    Sous-jacent de référence
  </div>
  <div class="left2">
    <input type="text" id="Sous-jacent" name="Sous-jacent2" required minlength="2" maxlength="50" size="10"> </div>



</body>

</html>

我想对我的算法说：“我的 3 和 div 从 x% 开始”

我尝试了很多东西（当我使用 float: right 时它可以工作，但它很混乱）

感谢您的帮助！

【问题讨论】：

可以调整 HTML 代码，还是只能通过 CSS 来完成？
是的，我可以像 Css 一样调整 Html
CSS-Grid 或 Flexbox。绝对不使用float。

标签： html css flexbox

【解决方案1】：

您可以尝试使用 flex 在布局中对齐您的项目。为您拥有的每个单元格（标题和输入）创建包装器，并将所有单元格包装到一个父包装器。在这种情况下，您可以单独控制每个单元格并创建所需的灵活网格。

此外，您可以简化单元格，请检查代码片段的前两行。对你有用吗？

body {
  background-color: rgb(0, 0, 0);
  text-align: center;
}

.title {
  color: white;
  border: 2px solid black;
  margin: 2%;
  padding-bottom: 2%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  color: white;
  column-gap: 1rem;
  row-gap: 1rem;
}

.cell {
  display: flex;
  width: calc(50% - .5rem);
  column-gap: 1rem;
}


/* old code */


/*.left {
  padding-left: 2%;
  float: left;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.left2 {
  padding-left: 2%;
  float: left;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.left3 {
  color: white;
  font-size: 20px;
  padding-top: 2%;
  position: absolute;
}

.right {
  float: left;
  padding-left: 30%;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.right2 {
  float: left;
  padding-left: 30%;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}*/

<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div class="title">
    <h2>Formulaire</h2>
  </div>

  <div class="wrapper">
    <div class="cell">
      <div class="text">
        typologie du produit
      </div>
      <input type="text" id="typologie" name="typologie" required minlength="2" maxlength="50" size="10">
    </div>

    <div class="cell">
      <div class="text">
        Sous-jacent de référence
      </div>
      <input type="text" id="Sous-jacent" name="Sous-jacent" required minlength="2" maxlength="50" size="10">
    </div>

    <div class="cell">
      <div class="left">
        typologie du produit
      </div>
      <div class="left2">
        <input type="text" id="typologie" name="typologie" required minlength="2" maxlength="50" size="10"> </div>

    </div>

    <div class="cell">
      <div class="right">
        Sous-jacent de référence
      </div>
      <div class="left2">
        <input type="text" id="Sous-jacent" name="Sous-jacent" required minlength="2" maxlength="50" size="10"> </div>
    </div>

    <div class="cell">
      <div class="left">
        Nom du produit


      </div>
      <div class="left2">
        <input type="text" id="typologie" name="typologi2" required minlength="2" maxlength="50" size="10"> </div>
    </div>

    <div class="cell">
      <div class="right">
        Sous-jacent de référence
      </div>
      <div class="left2">
        <input type="text" id="Sous-jacent" name="Sous-jacent2" required minlength="2" maxlength="50" size="10"> </div>

    </div>
  </div>

</body>

</html>

【讨论】：

感谢它的工作！我正在检查你的代码
没有解释的解决方案被视为立即投反对票。
@カメロン我稍后在我的答案中添加了一些 cmets）

【解决方案2】：

删除与left 和right div 关联的所有floats 和padding。然后将每一面嵌套到wrappers 中并使用flexbox。然后您可以使用gap 将它们隔开。最后，您可以限制每个 div 文本的宽度，以便间距相同并且输入堆叠在彼此的顶部，您可以通过设置 min-width

body {
  background-color: rgb(0, 0, 0);
  text-align: center;
}

.title {
  color: white;
  border: 2px solid black;
  margin: 2%;
  padding-bottom: 2%;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.left,
.right {
  min-width: 170px;
  color: white;
  font-size: 20px;
}

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div class="title">
         <h2>Formulaire</h2>
      </div>
      <div class="wrapper">
         <div class="left">
            typologie du produit
         </div>
         <div class="left2">
            <input type="text" id="typologie" name="typologie" required minlength="2" maxlength="50" size="10"> 
         </div>
         <div class="right">
            Sous-jacent de référence
         </div>
         <div class="left2">
            <input type="text" id="Sous-jacent" name="Sous-jacent" required minlength="2" maxlength="50" size="10"> 
         </div>
       </div>
       <div class="wrapper">
         <div class="left">
            Nom du produit
         </div>
         <div class="left2">
            <input type="text" id="typologie" name="typologi2" required minlength="2" maxlength="50" size="10"> 
         </div>
         <div class="right">
            Sous-jacent de référence
         </div>
         <div class="left2">
            <input type="text" id="Sous-jacent" name="Sous-jacent2" required minlength="2" maxlength="50" size="10"> 
         </div>
      </div>
   </body>
</html>

【讨论】：

它也可以，谢谢！我正在检查您的解决方案以及我的“旧”代码之间的区别