Q&A
HTMLにcssの読み込みの記述がないように見受けられます。
入力フォームが中央配置にならず困っています。
試したこと
#name {
text-align: center;
margin: 0 auto;
}の追加。div="cm"にtext-align: center;を追加等試してみましたが、中央配置になりません。
フォームの上の左にある「名前」という文字は中央配置にはしないです。
分からずずっと止まっています。
回答よろしくお願いいたします。
html
1<!DOCTYPE html> 2 3<html lang="ja"> 4 5<head> 6 <meta content="text/html; charset=utf-8" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8<link href="base.css" rel="stylesheet" media="all"> 9 10 <title></title> 11 12 <style> 13 14</style> 15 16</head> 17<body> 18 19 <form action="LPmouth1.php" method="post" id="form"> 20 <div class="mw430 cm w90 input_data blue"> 21 <div> 22 <div class="font25 b lt_004">名前：<span class="fontS">※</span></div> 23 <div class="font22"> 24 <input type="text" name="name" id="name" value=""> 25 <div class="err_msg">※お名前が入力されていません。</div> 26 </div> 27 </div> 28 29 30 </div> 31 </form> 32 </body> 33</html>
base.css
css
1.mw430 { 2 max-width: 430px; 3} 4.blue { 5 color: #32aad2; 6} 7.w90 { 8 width: 90%; 9} 10.cm { 11 margin-left: auto; 12 margin-right: auto; 13} 14 15 16 17 18.font25 { 19 font-size: 22px; 20} 21.lt_004 { 22 letter-spacing: -0.04em; 23} 24.b { 25 font-weight: bold; 26} 27.blue { 28 color: #32aad2; 29} 30 31.font22 { 32 font-size: 1.375em; 33} 34 35 36.input_data > div { 37 padding-bottom: 1em; 38} 39 40input, textarea { 41 width: 100%; 42 max-width: 100%; 43 font-size: 1em; 44 padding: 0.3em 0.5em; 45 display: block; 46 border: 3px solid #32aad2; 47 color: #000; 48 -moz-appearance: none; 49 -webkit-appearance: none; 50 appearance: none; 51 vertical-align: middle; 52}
回答2件
0
ベストアンサー
当該のコードをjsFiddleで検証してみましたが、<input>が<div>（下図の青い部分）からはみ出しています。
これは、デフォルト設定だとwidthがボーダー・パディングを含まない設定となっているので、中身が100%に対してボーダー・パディングの分だけはみ出してしまいます。
box-sizing: border-boxとすると、widthの基準をボーダーの外側に変更することができます。
投稿2022/08/22 07:21
総合スコア145184
0
css
1input, textarea { 2 box-sizing: border-box; 3}
を追加してください。
投稿2022/08/22 07:15
総合スコア2859
あなたの回答
tips
プレビュー
