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

Question

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

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

下面是当我增加宽度时它是如何对齐的：

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

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>

Answer 1

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

这是因为当您在方形复选框上设置高度时，宽度需要相同，否则在理论中它会变成一个矩形，但该元素不会那样工作，所以它仍然是一个正方形，但是周围有一个看不见的矩形。

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

How to align HTML checkbox to left when adjusting its size with CSS?

html

css

checkbox

alignment

size

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

下面是当我增加宽度时它是如何对齐的：