Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
YOUTUBEを参考に、HTML CSSを勉強しているのですが、CSSでfont-size:inherit;を適用した際にフォームの並びが横並びから縦並びに変わりました。inheritは親要素を継承するとのことでしたが、何で横から縦になったのか理解できません。どなたか教えていただけないでしょうか。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>UIに関する擬似要素の練習</title> <link rel="stylesheet" href="TechAcademy.css"> </head> <body> <form> <input type="text" name="name" placeholder="name"/> <input type="text" name="email"placeholder="email"/> <div> <input type="radio"id="radio1" name="radio"><label for="radio1">option1</label> <input name="radio" id="radio1" type="radio"><label for="radio2">option2</label> <input name="radio" id="radio1" type="radio"><label for="radio3">option3</label> </div> <input type="submit" name="submit"> </form> </body> </html>
CSS
body { background-color: #e8f3f8; } form{ margin: 80px auto; width: 320px; color: steelblue; } input { padding: 10px; border-radius: 5px; font-size: inherit; }
inheritの設定なしCSS
body { background-color: #e8f3f8; } form{ margin: 80px auto; width: 320px; color: steelblue; } input { padding: 10px; border-radius: 5px; }
申し訳ございません。編集いたしました。
ご丁寧なアドバイスありがとうございました。
https://jsfiddle.net/xcgam0tz/ 「font-size: inherit;」を指定しない状態でも「縦並び」ですが、「適用する前」のCSSも提示してみてください。
追加しました！
https://jsfiddle.net/xcgam0tz/ ←動くサンプルです。横並びになっていませんよ。
私のPCではemailのテキストとnameのテキストが隣同士並んでいるように見えます。
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
