Question

不知道我在做什么错，但是这些标签/输入和按钮元素中的填充样式根本不起作用，因为当我一遍又一遍地刷新chrome时，什么都没有改变。在网上搜索之后，我仅找到了添加显示的解决方案：将内联块添加到这些元素，但仍无法正常工作。请在下面查看我的全部代码：

.block {
  display: inline-block;
  margin: 5px 0px;
  padding: 10px auto 10px 10px;
  width: 100%;
}

.bold {
  font-size: 20px;
  font-weight: 400;
}

input[type="radio"] {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #aaaaaa;
  margin: auto 4px;
}

input[type="radio"]:checked {
  background-color: #aaaaaa;
}

body {
  font-family: "Montserrat", sans-serif;
}

button {
  background-color: white;
  border: 1px solid #da1e1e;
  color: #da1e1e;
  display: inline-block;
  padding: 10px auto;
  width: 100%;
}

button:hover {
  background-color: #da1e1e;
  color: white;
}

form {
  width: 500px;
  margin: 0 auto;
}

h1 {
  font-size: 35px;
  font-weight: 500;
  text-align: center;
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet" />
  <title>New Patient Form</title>
</head>

<body>
  <form action="">
    <h1>Register as a New Patient</h1>
    <label class="bold" for="full name">Full Name</label>
    <input class="block" type="text" id="full name" name="full name" placeholder="e.g. George Lucas" required/>
    <label class="block bold">Sex</label>
    <label class="change"><input name="sex" type="radio" value="male" required />Male</label
      >
      <label class="change"
        ><input name="sex" type="radio" value="female" required />Female</label
      >
      <label class="change"
        ><input name="sex" type="radio" value="other" required />Other</label
      >
      <label class="block bold" for="date of birth">Date of Birth</label>
    <input class="block" type="date" id="date of birth" name="date of birth" required/>
    <label class="block bold" for="email address">Email Address</label>
    <input class="block" type="email" id="email address" name="email address" placeholder="e.g. g.lucas@gmail.com" required/>
    <button type="submit">Submit Details</button>
  </form>
</body>

</html>

Answer 1

没有填充auto这样的东西。

因此，整个填充行无效，没有被使用。

检查元素时也可以看到此信息。您会注意到它旁边有一个警告标志，它被划掉了：

Answer 2

没有自动填充。

更改为此：

.block{
padding: 10px 0px 10px 10px;
}

可以在检查中看到此错误：

Answer 3

“自动”是指自动调整。它具有宽度，高度，边距和背景尺寸。不能填充。

padding: 10px 0px 10px 10px;

只需将其设置为0px而不是自动，它应该可以正常工作。

.block {
  display: inline-block;
  margin: 5px 0px;
  padding: 15px 0px 15px 15px;
  width: 100%;
}

<input class="block" type="text" id="full name" name="full name" placeholder="e.g. George Lucas" required />

即使显示内联块，填充也无法在CSS中工作

3 个答案: