Q&A
現状の画面キャプチャご提示ください。
レイアウトは感覚によるところが大きいので可能ならば「こうしたい」というところまで図示してもらったほうが答えやすいです。
ログインフォームを作成しています。
メールアドレスとパスワードを入力する<input>幅を背景と同じ幅にしたいのですが、
どうやっても右側がはみ出してしまいます。
<input>のpaddingやmarginの値を変更したり、widthを100%にしてみましたが、右側ははみ出たままです。
どなたか分かる方、回答宜しくお願い致します。
html
1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 9 <title>sign in</title> 10 11 <link rel="stylesheet" href="style.css"> 12</head> 13 14<body> 15 16<!-- start main --> 17<div class="sign-in"> 18 19 <div class="title"> 20 <h1>SIGN IN</h1> 21 </div> 22 23 <div class="login-form"> 24 <form action=""> 25 <div class="login-page-content"> 26 <label for="customer_email">Email Address</label> 27 <input type="email" id="customer_email"> 28 <label for="customer_password">Password</label> 29 <input type="password" id="customer_password"> 30 </div> 31 </form> 32 </div> 33 34</div> 35<!-- end main --> 36 37</body> 38 39</html> 40
css
1html { 2 font-size: 62.5%; /*ベースを10pxにしています*/ 3} 4 5 6body { 7 font-size: 1.6rem; /*10px*/ 8 margin: 0; 9} 10 11 12 13/* main */ 14.sign-in{ 15 width: 40rem; 16 margin: 0 auto; 17 background-color: aquamarine; 18} 19 20 21h1{ 22 text-align: center; 23} 24 25 26.title{ 27 margin-top: 5rem; 28 margin-bottom: 5rem; 29} 30 31 32label{ 33 display: block; 34 margin-bottom: 1rem; 35 font-size: 1.5rem; 36 color: #7a7a7a; 37} 38 39 40input{ 41 display: block; 42 width: 100%; 43 padding: 0.7rem 1rem; 44 margin-bottom: 2rem; 45} 46 47 48#customer_email{ 49 margin-bottom: 3rem; 50}
ご意見ありがとうございます。
次回からは分かりやすい質問をするよう心がけます。
質問は編集できますので、追記修正依頼がきたら都度対応されたほうが良いかと思います。
いつくるか分からない「次」にまわすと大抵忘れます
回答1件
0
ベストアンサー
既定では、padding と border の幅を含まないで width を計算しますので、そのぶんはみ出ます。
box-sizing で計算法を変更すればいいでしょう。
css
1input{ 2 display: block; 3 width: 100%; 4 padding: 0.7rem 1rem; 5 margin-bottom: 2rem; 6 box-sizing: border-box; /* 追加 */ 7}
投稿2021/01/04 03:11
総合スコア34073
あなたの回答
tips
プレビュー
