Contact Form 7のラジオボタンやチェックボックスを縦並びに表示する

WordPressのContact Form 7プラグインで作成するメールフォームに追加したラジオボタンは次のように横並びになります。

縦に並べるには、次のようなCSSを記述する方法があります。

/* Contact Form 7のラジオボタンを縦並びに */
.wpcf7-radio .wpcf7-list-item {
    margin-top:10px;
    display: block;
}

表示結果は次のようになります。

span（.wpcf7-list-item）に対して「display: block;」を指定することで、横並びのインライン要素ではなくブロック要素として表示しています｡「margin-top:10px;」は項目の上に余白を入れているだけです。

上記のCSSセレクタからラジオボタンを示す「.wpcf7-radio」を削除すると、チェックボックスなどすべてのリスト項目が縦並びになります。

/* Contact Form 7のリスト項目をすべて縦並びに */
.wpcf7-list-item {
    margin-top:10px;
    display: block;
}

表示結果は次のようになります。