CSS 中的内部表单对齐：难以对齐输入框和文本字符串答案

【问题标题】：Inner Form Allignments in CSS: Difficulty with aligning input boxes and text stringsCSS 中的内部表单对齐：难以对齐输入框和文本字符串
【发布时间】：2020-05-25 11:31:54
【问题描述】：

所以，我正在构建一个表单来收集个人信息。一行中的三个部分 - 一个文本字符串字段名称、一个 input 框和一个文本字符串说明和示例，我希望看起来像这样：

      First Name: INPUT BOX eg. Bob, your given name
         Surname: INPUT BOX eg. Smith, your family name
Languages Spoken: INPUT BOX eg. English, French, Chinese,

所以这是一个尚未解决的 CSS 问题，因为 CSS 对我来说是新事物。我有兴趣获得三个垂直的垂直对齐方式：冒号、input 框和 eg.s。最左边的边距是参差不齐的，最右边的边距也是如此。我想将注意力集中在中心的输入框上，并将左右文本字符串放置在两侧，每个输入项一行。如何解决这个问题？原始 html 默认为齐平的左边距，内部对齐参差不齐。

感谢您的帮助，

比尔

示例 html：

<!-- Repeat and customize the 3 line block for each line/input-box/string -->

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Personal Data Collector </title>
  <meta charset="utf-8">
</head>

<body>
  <fieldset>
    <form method="post" action="personal_d_collector.py">
      <h3> Personal Data </h3>
      <lable for="f_name"> First Name: </lable>
      <input type="text" id="f_name" name="f_name">
      <span> eg. Bob, your given name. </span><br>
      <lable for="l_name"> Surname: </lable>
      <input type="text" id="l_name" name="l_name">
      <span> eg. Smith, your family name. </span><br>
    </form>
  </fieldset>
</body>

<html>

【问题讨论】：

是否有任何设计可满足您的要求。
请详细说明
请注意：要使<label> 正常工作（即，作为名称位于label 标记的for 属性中的字段的标签），它必须是拼写正确，即不是“标签”，而是“标签”。例如，这对可访问性很重要，但对一般语义也很重要。

标签： html css forms

【解决方案1】：

如果您的意思是希望输入字段垂直对齐，您可以将display: inline-block 应用于标签并为其定义min-width。

要在input 框和随后的spans 之间创建一些距离，您可以将padding-left 应用于它们（但是，我建议为此使用类）。

label {
  display: inline-block;
  min-width: 100px;
}

form span {
  padding-left: 1em;
}

<form method="post" action="personal_d_collector.py">

  <h3> Personal Data </h3>

  <label for="f_name"> First Name: </label>
  <input type="text" id="f_name" name="f_name">
  <span> eg. Bob, your given name. </span><br>

  <label for="l_name"> Surname: </label>
  <input type="text" id="l_name" name="l_name">
  <span> eg. Smith, your family name. </span><br>

</form>

【讨论】：

【解决方案2】：

<label for="f_name"> First Name: </label>
<input type="text" id="f_name" name="f_name" style="margin-left:200px;">
<span style="float:right;"> eg. Bob, your given name. </span><br>

<label for="l_name"> Surname: </label>
<input type="text" id="l_name" name="l_name" style="margin-left:200px;">
<span style="float:right;"> eg. Smith, your family name. </span><br>

这会起作用，我认为将输入框居中最好先将其放在 div 块中，然后将其居中以实现响应。

<div style="text-align:center;">
  <label for="f_name" style="float:left;"> First Name: </label>
  <input type="text" />
  <span style="float:right;"> eg. Bob, your given name. </span><br>
</div>

这是另一种方法。

【讨论】：