html - 使用百分比填充时，文本进入单独的行

Question

我在 html 表单中有一个小问题。当我给出以下CSS时，

.row .section-1 label {/* Formatting all section-1 labels */
      padding: 0 5px 0 10px;
      margin: 3px 0 0 0;
      display:block;

}

这是我得到的输出：

但是，当我编辑 css 以百分比形式放置填充时：

.row .section-1 label {/* Formatting all section-1 labels */
      padding: 0 40% 0 80%;
      margin: 3px 0 0 0;
      display: block;
}

这是我得到的输出：

我想使用百分比，但是我想要第一张图片中的样子。有任何想法吗？？

谢谢

Answer 1

您在标签元素的左侧填充太多：

.row .section-1 label {/* Formatting all section-1 labels */
      padding: 0 40% 0 80%;
      margin: 3px 0 0 0;
      display: block;
}

CSS padding 的百分比定义如下：

以包含元素的百分比定义填充

所以它将标签元素宽度的 80% 作为填充添加。在您原来的固定填充示例中，您只在左侧设置了 10px 填充。