我想对齐我的元素，以便它们从同一个位置开始（垂直）

Question

我试着做一些 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 时它有效，但它很混乱）

感谢您的帮助！

Answer 1

删除与 left 和 right div 关联的所有 floats 和 padding。然后将每一边嵌套到 wrappers 中并使用 flexbox。然后你可以使用gap来space他们。最后，您可以限制每个 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>

Answer 2

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

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

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>

我想对齐我的元素，以便它们从同一个位置开始（垂直）

i want to align my elements so that they start in the same place (vertically)

html

css

flexbox