使用百分比填充时，文本将分成不同的行

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填充的百分比定义如下：

  

以包含元素的％来定义填充

因此，它将80％的标签元素宽度添加为填充。在原始的固定填充示例中，您只在左侧设置10px填充。