代码之家 › 专栏 › 技术社区 › guiguilecodeur

我想对齐元素,使它们从同一位置开始(垂直)

css html

guiguilecodeur · 技术社区 · 3 年前

我试着做一些CSS,一行有4个项目。我想把我的两个“sous jacent de rfence”对齐,但我不知道该怎么做。我试着用 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 但这很令人困惑)

谢谢你的帮助!

0 回复 | 直到 3 年前

Yaroslav Trach 3 年前

您可以尝试使用弯曲以在布局中对齐项目。为每个单元格(标题和输入)创建包装,并将所有单元格包装到一个父包装中。在这种情况下,可以分别控制每个单元,并创建所需的灵活网格。

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

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>

Kameron 3 年前

全部删除 floats 和 padding 与 left 和 right divs。然后将每一侧嵌套到 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>