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 パディングの定義は次のとおりです。

含まれている要素の % でパディングを定義します

したがって、ラベル要素の幅の 80% をパディングとして追加しています。元の固定パディングの例では、左側に 10px のパディングのみを設定しています。