CSS は HTML_html/css_WEB-ITnose の要素の配置を制御します

登録インターフェイスは次のように記述されます:

属性を中央に設定し、入力ボックスの下に赤いプロンプトを表示し、入力ボックスと左揃えにします。私の HTML コードは次のとおりです:

<form action="registPro" method="post" id="regist">   <div>       <input type="text" id="name" name="user.username" placeholder="用户名">                         </div>       <span id="msg01" class="msg"></span>   <div>       <input type="password" id="pass" name="user.pass" placeholder="设置密码">         </div>       <span id="msg02" class="msg"></span>   <div>      <input type="submit" id="submit" value="注  册" class="button"/>   </div>                  	  	     		      		     	  		

CSS プロパティは次のように設定されています:

<style type="text/css"> input{width:280px;height:30px} .msg{color:red; font-size:1pt;} div{text-align:center;line-height:60px;}                    .button{background-color:OrangeRed;width:250px;height:30px;border:0;}</style>

必要な機能を実現するにはどうすればよいですか? ?

ディスカッションに返信 (解決策)

 .msg{color:red; font-size:1pt; text-align:center; display:block;}

 .msg{color:red; font-size:1pt; text-align:center; display:block;}

あなたが言ったのは、 を中央に配置することです。私が望むのは、赤いプロンプトと入力ボックスを左揃えにすることです。

 .msg{color:red; font-size:1pt; text-align:center; display:block;}

あなたが言ったことは、 を中央に配置することです。私が望むのは、赤いプロンプトと入力ボックスを左に揃えることです

 .msg{color:red; font-size:1pt;display:block;width:280px;margin:0 auto;}

<div class="cen"><form action="registPro" method="post" id="regist">   <div>       <input type="text" id="name" name="user.username" placeholder="用户名">                         </div>       <span id="msg01" class="msg">ssssss</span>   <div>       <input type="password" id="pass" name="user.pass" placeholder="设置密码">         </div>       <span id="msg02" class="msg">ssss</span>   <div class="tc">      <input type="submit" id="submit" value="注  册" class="button"/>   </div> </form></div>  <style type="text/css">    .tc{text-align:center;}    .cen{text-align:center;margin:0 auto;width:300px;}    .cen form{text-align:left;} input{width:280px;height:30px} .msg{color:red; font-size:1pt;} div{line-height:30px;}                    .button{background-color:OrangeRed;width:250px;height:30px;border:0;}</style>

Putテキストボックスとプロンプト フレームは親 div にあります。この親 div に CSS スタイル text-aline:left を設定します

自分で練習する場合は、次のように記述できます。会社のプロジェクトの場合は、検証フレームワークを使用できます。これは非常に便利です

Jquery validate を参照してください

> = "msg" > ="ユーザー名">

同じになりたいなら、一緒にいなければなりません



設定できますフォームの幅。これらをブロックとして表示すると、レイアウトが非常にシンプルになります