CSS/HTML - 输入框没有按表单的几个像素对齐

Question

我已经在这个问题上停留了几个小时，并尝试了我能想到的一切。

本质上，我有一个表单在两个单独的输入中接受一个电子邮件地址和一个令牌 boxes/fields，我将整个表单居中并将两个框放在不同的行上，但是当我仔细观察时（并且测量），供用户输入的两个文本框错位了 8 个像素，这让我的 OCD 发疯了。这是我的表单代码。

<form id="order" method="POST" action="/orderemail">
  <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
  <input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>

  <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
  <input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>

我已经仔细检查过，“文本信息”CSS 根本不是导致它的原因，我已经尝试删除所有其他 CSS styling/references 到类不用解决问题我也能看出来。我也附上了代码图片。

Code

Answer 1

这是因为您的标签宽度不一样。单词，即使字母数量相同，也可能比彼此更小/更宽，具体取决于您使用的字体。例如，“W”通常比“I”多space。

需要做的是在标签上放置宽度/min-width，使用列或使用 table。您也可以做其他事情，但最后，您需要确保标签和输入之间存在某种“space 分离”。

Answer 2

您可以使用 margin-left 属性（在 text-box 样式上）与标签保持相等的边距

<form id = "order" method = "POST" action ="/orderemail">
  <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
  <input style="margin-left:8px;text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>

  <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
  <input style="margin-left:4px;text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>

Look at the fiddle

Answer 3

如果你想超级对齐，你可以在标签上放置一个填充。标签文本是问题所在。但如果这对您来说很重要，您可以使用填充，如下所示；

<form id = "order" method = "POST" action ="/orderemail">
      <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large; padding-right:2px;">Email:</label>
      <input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>

      <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
      <input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
    </form>

Answer 4

如果您有权访问 HTML 将每个 input 和 label 对放入容器中，则在该容器上使用 flexbox 是一种很好的动态方式这样做。

您可以在 input 元素上使用 flex: 1; 以确保它们大小相同。

flex: 1; 是 shorthand 用于：

flex-grow: 1; = 元素将按与 window-size

相同的比例增长

flex-shrink: 1; = 元素将按与 window-size

相同的比例收缩

flex-basis: 0; = 元素本身没有起始值，将根据可用的屏幕尺寸占用屏幕，例如：- 如果包装器中有 3 个 div，则每个 div 将占用 33%。

以上来源：

然后您可以应用 max-width 让 input 随心所欲地缩放。我在这个例子中使用了 70px，但是如果你有一个更大的文本，你可以使用一个更高的值。

编辑

flexbox 也适用于 grid。以下是如何确保 div-容器具有相同高度的示例：

/* For equal height - not necessary */
form {
  display: grid;
  grid-auto-rows: 1fr;
}
/* -------------------------------- */
div {
  display: flex;
}

div>label {
  flex: 1;
  max-width: 70px;
}

<form id="order" method="POST" action="/orderemail">
  <div>
    <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
    <input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
  </div>
  <div>
    <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
    <input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
  </div>
</form>

Answer 5

您可以使用margin函数将其移动4个像素使其对齐。

<form id = "order" method = "POST" action ="/orderemail">
      <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
      <input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>

      <label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
      <input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
    </form>
    
<style>
    #email{
      margin-left: 4px;
    }
</style>

CSS/HTML - 输入框没有按表单的几个像素对齐

CSS/HTML - Input boxes are not aligned by a few pixels for a form

html

css

forms

编辑