Q&A
コードはマークダウンのcode機能を利用してご提示ください
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
現在 css,htmlやjQueryを用いてフォームをアプリを開発しております。
cssのレイアウトについて質問があります。
解決方法をご教示いただけますと幸いです。
発生している問題・エラーメッセージ
送信ボタンを押した際に
レイアウトが崩れてしまいます。
おそらくcssのラベルが原因ではないかと思われます。
該当のソースコード
<!DOCTYPE html> <head> <title></title> <style> ul li { list-style: none; border-top:solid 1px gray; border-right: solid 1px gray; border-bottom: solid 1px gray; border-left: solid 1px gray; font-weight:bold; } label { margin:2px; font-size:20px; width:300px; height:10px; float: left; text-align:left; } span{ font-size:12px; padding-left: 15px; color:red } textarea{ vertical-align:top; margin:2px; border: 1px solid black; } input[type="text"]{ border: 1px solid black; width:300px; height:25px; margin:2px; } input[type="radio"]{ border: 1px solid black; margin:8px; } input[type="checkbox"]{ border: 1px solid black; margin:8px; } .focus{ background-color:#C0EDF3; } dd.error input , dd.error textarea , dd.error select , dd.error label { background-color: #F8DFDF; } dd p.error{ margin:0; color:red; font-weight:bold; margin-bottom:1em; } dd label{ padding:5px; } </style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- ================= --> <!-- ▼jQuery 読み込み --> <!-- ================= -->
<script> $(function(){ $('input[type=text],textarea').focus(function(){ $(this).addClass('focus'); }).blur(function(){ $(this).removeClass('focus'); }); }); </script> <script type="text/javascript"> $(function(){ $("form#register").submit(function(){ <!-- エラー表示の初期化 --> $("p.error").remove(); $("dl dd").removeClass("error"); <!--1行テキスト入力フォームとテキストエリアの検証--> $(":text,textarea").filter(".validate").each(function(){ <!--必須項目の検証--> $(this).filter(".Required").each(function(){ if($(this).val()==""){ $(this).parent().prepend("<p class='error'>必須項目です</p>") } }) }) }) }); </script> </head> <body> <form id ="register"> <ul> <dl> <li class ="company"><dt><label for="company">御社名 <span >必須</span></label></dt> <dd><input type="text" id="companyrequired" name ="companyrequired" value="" class="validate Required"></dd> </li> <li class ="address"><dt><label for="address">会社住所<span>必須</span> </label></dt> <dd><input type="text" id="address" name ="address" value="" class="validate Required"></dd> </li> <li class="requestDetails"> <dt><label for="requestDetails">ご依頼内容詳細<span>必須</span></label></dt> <dd><textarea name="requestDetails" id="requestDetails" class ="validate Required" cols="50" rows="10"></textarea></dd> </li> </ul> </dl> <div> <input type="submit" value="送信" name="submit" class ="submit"> <input type="reset" value="リセット" name="reset" class ="reset"> </div> </form> </body> </html><!-- ==================================================== --> <!-- ▼サブメニューを開閉するためのスクリプト(jQuery利用) --> <!-- ==================================================== -->
試したこと
エラーがでるラベルの横幅を変えてみたり、
hmtlのlistの部分が原因かと思い、
削除してみましたが解決しませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
「レイアウトが崩れてしまいます」とのことですが、具体的には何が起きていますか？
また、どのような表示になることを想定していますか？
結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1
期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3
3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7
あなたの回答
tips
プレビュー
