2016-10-18 11 views
-1

Iは、次のHTMLフォームを設計した:正当な方法でフォーム要素を揃える方法は?

 div{ 
 
      display: inline-block; 
 
     } 
 
     fieldset{ 
 
      display: inline-block; 
 
     } 
 
     
 
    
 <body> 
 

 
     <form action="index.html" method="post"> 
 
     
 
      <h1><center>FCNB Loan Request</center></h1> 
 
     
 
      <center> 
 
      <fieldset> 
 
      
 
      <div> 
 
      
 
      <label for="name">Branch Name and Code:</label> 
 
      <input type="text" id="name" name="user_name"> 
 
      
 
\t \t <label for="pfnumber">PF Number:</label> 
 
      <input type="text" id="name" name="pfnumber"> 
 
\t \t 
 
\t \t <label for="cpname">Contact Person Name:</label> 
 
      <input type="text" id="name" name="cpname"> 
 
\t \t 
 
\t \t <label for="cnumber">Contact Number:</label> 
 
      <input type="text" id="name" name="cnumber"> 
 
\t \t 
 
      </div> 
 
\t \t <hr> </hr> 
 
\t \t 
 
\t \t <!-- Input Fields --> 
 
\t \t 
 
      <div> 
 
      
 
\t \t <label for="customer">Customer:</label> 
 
      <input type="text" id="name" name="customer"> 
 
\t \t 
 
\t \t <label for="cif">CIF Number:</label> 
 
      <input type="text" id="name" name="cif"> 
 
\t \t 
 
\t \t <label for="dfgt">If exporter, mention DGFT No. : </label> 
 
      <input type="text" id="name" name="dfgt"> 
 
\t \t 
 
\t \t <label for="activity">Activity:</label> 
 
      <input type="text" id="name" name="activity"> 
 
\t \t 
 
      </div> 
 
      
 
\t \t <hr /> 
 

 
     </fieldset> 
 
     </center> 
 
     </form> 
 
     </body>

フォーム要素が画面の幅を覆うことなく中心ように配列されています。私はフォーム要素を "正当な"方法、すなわち画面の幅をカバーするように整列させたいと思います。これはどうすればできますか?

+0

''

非推奨/廃止要素とすべきとのハイ変化width:100%もはや使用されず、 –

答えて

0

私はスタイルに次のコードを追加しました:

form label, form input { 
    display: block; 
    margin-bottom: 10px; 
} 

これはあなたのラベルとinputタグは、ブラウザの全幅を取る作っても、それにある程度のマージン底を追加します。

 div{ 
 
      display: inline-block; 
 
     } 
 
     fieldset{ 
 
      display: inline-block; 
 
     } 
 
     form label, form input { 
 
      display: block; 
 
      margin-bottom: 10px; 
 
     } 
 
     
 
    
 <body> 
 

 
     <form action="index.html" method="post"> 
 
     
 
      <h1><center>FCNB Loan Request</center></h1> 
 
     
 
      <center> 
 
      <fieldset> 
 
      
 
      <div> 
 
      
 
      <label for="name">Branch Name and Code:</label> 
 
      <input type="text" id="name" name="user_name"> 
 
      
 
\t \t <label for="pfnumber">PF Number:</label> 
 
      <input type="text" id="name" name="pfnumber"> 
 
\t \t 
 
\t \t <label for="cpname">Contact Person Name:</label> 
 
      <input type="text" id="name" name="cpname"> 
 
\t \t 
 
\t \t <label for="cnumber">Contact Number:</label> 
 
      <input type="text" id="name" name="cnumber"> 
 
\t \t 
 
      </div> 
 
\t \t <hr> </hr> 
 
\t \t 
 
\t \t <!-- Input Fields --> 
 
\t \t 
 
      <div> 
 
      
 
\t \t <label for="customer">Customer:</label> 
 
      <input type="text" id="name" name="customer"> 
 
\t \t 
 
\t \t <label for="cif">CIF Number:</label> 
 
      <input type="text" id="name" name="cif"> 
 
\t \t 
 
\t \t <label for="dfgt">If exporter, mention DGFT No. : </label> 
 
      <input type="text" id="name" name="dfgt"> 
 
\t \t 
 
\t \t <label for="activity">Activity:</label> 
 
      <input type="text" id="name" name="activity"> 
 
\t \t 
 
      </div> 
 
      
 
\t \t <hr /> 
 

 
     </fieldset> 
 
     </center> 
 
     </form> 
 
     </body>

0

フォーム要素、

form label, form input { 
     width:100%; 
    } 

div{ 
 
      display: inline-block; 
 
     } 
 
     fieldset{ 
 
      display: inline-block; 
 
     } 
 
     form label, form input { 
 
      width:100%; 
 
     }
<body> 
 

 
     <form action="index.html" method="post"> 
 
     
 
      <h1><center>FCNB Loan Request</center></h1> 
 
     
 
      <center> 
 
      <fieldset> 
 
      
 
      <div> 
 
      
 
      <label for="name">Branch Name and Code:</label> 
 
      <input type="text" id="name" name="user_name"> 
 
      
 
\t \t <label for="pfnumber">PF Number:</label> 
 
      <input type="text" id="name" name="pfnumber"> 
 
\t \t 
 
\t \t <label for="cpname">Contact Person Name:</label> 
 
      <input type="text" id="name" name="cpname"> 
 
\t \t 
 
\t \t <label for="cnumber">Contact Number:</label> 
 
      <input type="text" id="name" name="cnumber"> 
 
\t \t 
 
      </div> 
 
\t \t <hr> </hr> 
 
\t \t 
 
\t \t <!-- Input Fields --> 
 
\t \t 
 
      <div> 
 
      
 
\t \t <label for="customer">Customer:</label> 
 
      <input type="text" id="name" name="customer"> 
 
\t \t 
 
\t \t <label for="cif">CIF Number:</label> 
 
      <input type="text" id="name" name="cif"> 
 
\t \t 
 
\t \t <label for="dfgt">If exporter, mention DGFT No. : </label> 
 
      <input type="text" id="name" name="dfgt"> 
 
\t \t 
 
\t \t <label for="activity">Activity:</label> 
 
      <input type="text" id="name" name="activity"> 
 
\t \t 
 
      </div> 
 
      
 
\t \t <hr /> 
 

 
     </fieldset> 
 
     </center> 
 
     </form> 
 
     </body>

関連する問題