使用 CSS 调整其大小时如何将 HTML 复选框左对齐？答案

【问题标题】：How to align HTML checkbox to left when adjusting its size with CSS?使用 CSS 调整其大小时如何将 HTML 复选框左对齐？
【发布时间】：2021-11-15 23:02:12
【问题描述】：

我在使用 CSS 时遇到了一些问题。特别是，每当我增加复选框的宽度时，它会增加围绕它的容器的大小，使其对齐远离页面的开头。这很难解释，我将在下面附上一张图片来更好地详细说明我的问题。

这是我希望它对齐的方式，但更大：

当我增加宽度时，它是如何自我对齐的：

同样，我的目标是增加复选框的宽度，同时保持与页面开头的对齐。我不使用任何第三方 CSS 库，例如 Bootstrap，以防有人想知道。到目前为止，我已经尝试调整边距、文本对齐和浮动 CSS 属性，但没有成功。谁有想法？我将在下面发布相关代码。

input[type=text],
input[type=tel],
select {
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
}

input[type=text],
input[type=tel],
label {
  color: rgba(0, 0, 0, .8);
  width: 176px;
}

label {
  margin: 5px;
}

input[type=checkbox] {
  height: 20px;
  width: 176px;
}

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

<head>
  <title>Learning Jquery</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <h1 class="header">Header</h1>

  <form id="input__form" action="" method="POST">
    <!-- Additional inputs -->
    <label for="input__zip">Zip</label><br />
    <input type="text" id="input__zip" name="input__zip" /><br />
    <label for="input__current__employee">Current Employee</label><br />
    <input type="checkbox" id="input__current__employee" name="input__current__employee" /><br />
    <input type="submit" id="input__submit" name="input__submit" value="submit" />
  </form>

</body>

</html>

【问题讨论】：

复选框总是呈方形。如果您想增加支票的大小，您需要添加“高度”（与宽度相同的值）
正如@AlvaroMenéndes 所说，为您的案例提供 20px 的宽度，而不是 176px :)
非常感谢大家，大脑袋放屁时刻。

标签： html css checkbox alignment size

【解决方案1】：

尝试改变相对于高度的宽度前任：高度：20px；宽度：20px;

这是因为当您在方形复选框上设置高度时，宽度需要相同，否则理论上它会变成一个矩形，但该元素不能以这种方式工作，因此它保持为方形，但有排序周围有一个不可见的矩形。

【讨论】：

好吧，我觉得很傻。显示我使用 HTML 和 CSS 已经有多久了。非常感谢