Q&A
WEB技術の初心者のため、お見苦しい点があるかと思いますが何卒宜しくお願い致します。
HTMLとPHPで入力フォームを作り、CSSでデザインを整えようとしているところです。
dtタグの内容（入力フォームのタイトル）もddタグの内容（入力フォームのボックス）もどちらも左寄せさせたいのですが、ddタグの内容が中央寄せ？になっています。
chromeの検証ツールで見てみたところ、左側にmarginが入っているようなのですが、とくにそのような指定はしていません。
また、それを打ち消すべく、ddタグの部分のCSSにmargin-right: auto;を入れてみましたが、結果は変わりませんでした。
フォームのサイズも変えてみたりしましたが、左寄せにはなりませんでした。
何が影響しているのかご教示頂けますと幸いです。
何卒宜しくお願い致します。
html
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<link rel="stylesheet" href="css/style.css"> 7 <title>ログイン</title> 8</head> 9 10<body> 11 <main> 12 <section id="content" class="input"> 13 <div class="input-wrapper"> 14 <p>IDとPWを入力してログインしてください。</p> 15 <form action="" method="post"> 16 <dl class="form-inner"> 17 18 <dt class="form-title">ID</dt> 19 <dd class="form-item"> 20 <input type="text" name="staff_id" size="35" maxlength="255" value="<?php print(htmlspecialchars($staff_id,ENT_QUOTES)); ?>" /> 21 </dd> 22 23 <dt class="form-title">PW</dt> 24 <dd class="form-item"> 25 <input type="password" name="password" size="35" maxlength="255" value="<?php print(htmlspecialchars($_POST['password'],ENT_QUOTES)); ?>" /> 26 </dd> 27 28 <div> 29 <input type="submit" value="ログインする" /> 30 </div> 31 32 </dl> 33 </form> 34 </div> 35 </section> 36 </main> 37</body> 38</html>
CSS
1@charset "utf-8"; 2html{ 3 font-size: 100%;/* 16px × 62.5% = 10px*/ 4} 5 6body{ 7 color: #333333; 8 font-family:"Open Sans",'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif; 9 font-size: 1rem; 10} 11 12 /* スマホ用の記述 */ 13 @media screen and (max-width:480px){ 14 /* ------------------ 15 content 16 *------------------ */ 17 .input-wrapper{ 18 width: 100%; 19 box-sizing: border-box; 20 } 21 22 .form-inner{ 23 display: block; 24 } 25 26 .form-title{ 27 width: 100%; 28 } 29 30 .form-item{ 31 width: 100%; 32 padding: 0 0 10px; 33 } 34}
回答1件
0
ベストアンサー
css
1 .form-item{ 2 width: 100%; 3 padding: 0 0 10px; 4 margin-left: 0; /* 追加 */ 5 }
margin-right: auto;
を入れたとありますが、、、
marginが入っているのは left ですから
これを 0 にすればOKだと思います^^
投稿2020/07/02 11:18
総合スコア674
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/07/02 11:23
2020/07/02 11:25
退会済みユーザー
2020/07/02 11:29