煤式自動連結器

WordPressの既存のテーマを流用して、Contact Form7を使っていたら、ラジオボタンが勝手に改行されてフォームとラベル文字が同じ行に並んでくれないという現象が発生しました。チェックボックスでも同じ現象が起こると予想できます。

パソコンではこんな感じ。

スマートフォンではこんな感じ。

label要素ごとにブロック単位で表示されるようで、機能として使えないわけではないけれど…美しくないですね。

この現象を直すCSSがこちらです。

span.wpcf7-list-item {
display: table-row;
white-space:norwarp;
}

span.wpcf7-list-item * {
width:20px;
}

これに味付けで、

input[type="radio"] , input[type="checkbox"]{
margin-right: 0.5em;
margin-bottom: 15px;
}

を加えて、フォームと文字の間隔などのバランスを取っています。

パソコンは、

スマートフォンは、

こんなふうに、なりました。

• contact form7で、ラジオボタンやチェックボックスが勝手に改行される

を参考にさせてもらいましたー。ホント助かりましたー。