面临html中文本对齐的困难答案

【问题标题】：facing difficulties in the alignment of text in html面临html中文本对齐的困难
【发布时间】：2021-09-07 12:58:42
【问题描述】：

.box{
        margin: 0 auto; 
        width:400px //you can set it in %.
        height: 600px;
        padding:20px;
        background:#f9f9f9;
        border:4px solid #333;
    }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Forms</title>
  </head>
  <body>

      <center>
        <div class="box">
          <img src="1.png" align="right">
          <h1>Form Updation</h1>

          <form name="first" method="get" action="https://www.mi.com/in/">

            First name : <input type="text" name="fname" size="15" maxlength="25"><br><br>
            Last name : <input type="text" name="Lname" size="15" maxlength="25"><br><br>
            Password : <input type="password" name="Password" size="10" maxlength="15"><br><br>
            Nationalaity : <input type="text" name="Country" size="15" maxlength="25"><br><br>

            Phone Number : <input type="text" name="Phone" size="15" maxlength="25"><br><br>


          </form>

        </div>
      </center>

  </body>
</html>

输出 - [电话号码与上述号码不符，我需要将电话号码安排在中心，就像所有在中心一样，我希望这5个应该由另一个人提供，因为其他地方有一些空间工作所有的填充部分必须带有空间索引。]

【问题讨论】：

标签： html css web frontend

【解决方案1】：

很难得到你想要的，但我想你的问题是我怎样才能以一个很好的顺序对齐文本和输入。

所以我们可以想办法在您的代码中做到这一点。

首先将您的文本和输入部分视为一个整体。我们可以将文本放在一个 div 中，并赋予它 50% 或 33% 的宽度。之后我们可以定义另一个div作为输入，给它剩余的宽度或者直接给输入的剩余宽度。

到现在

*{
  box-sizing:border-box;
}
#form{
  width:50%
}
#form div,
#form input{
  display:inline-block;
}
#form div{
  width:35%;
}
#form input{
  width:65%;
}

<form id="form" name="first" method="get" action="https://www.mi.com/in/">

        <div>First name : </div><input type="text" name="fname" size="15" maxlength="25"><br><br>
        <div>Last name : </div><input type="text" name="Lname" size="15" maxlength="25"><br><br>
        <div>Password : </div><input type="password" name="Password" size="10" maxlength="15"><br><br>
        <div>Nationalaity : </div><input type="text" name="Country" size="15" maxlength="25"><br><br>
        <div>Phone Number : </div><input type="text" name="Phone" size="15" maxlength="25"><br><br>

</form>

但不要忘记让你的组件 box-sizing 为边框。如果你不给 33% 和 66% 宽度或任何总和 100% 的东西就不能并排工作。您的输入将换行。所以我们给表单一个我们想要的宽度，然后我们将输入和 div inline-block 并排并排，然后给出宽度。如果您想将文本居中，您可以将 text-align:left 添加到您的 div 中。

#form div{
  width:35%;
  text-align:left;
}

#form 用我们提供的 id 表示我们的表单，#form div 表示该表单内的 div（您可以检查组合符）等等。这是组合器的链接。

Combinators in CSS

【讨论】：