Question

我设计了以下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">
          
		  <label for="pfnumber">PF Number:</label>
          <input type="text" id="name" name="pfnumber">
		  
		  <label for="cpname">Contact Person Name:</label>
          <input type="text" id="name" name="cpname">
		  
		  <label for="cnumber">Contact Number:</label>
          <input type="text" id="name" name="cnumber">
		  
            </div>
		  <hr> </hr>
		  
		  <!-- Input Fields -->
		  
          <div>
          
		  <label for="customer">Customer:</label>
          <input type="text" id="name" name="customer">
		  
		  <label for="cif">CIF Number:</label>
          <input type="text" id="name" name="cif">
		  
		  <label for="dfgt">If exporter, mention DGFT No. : </label>
          <input type="text" id="name" name="dfgt">
		  
		  <label for="activity">Activity:</label>
          <input type="text" id="name" name="activity">
		  
          </div>
          
		  <hr />

         </fieldset>
        </center>
        </form>
        </body>

表格元素以居中的方式对齐，而不覆盖屏幕的宽度。我希望表单元素以“合理”的方式对齐，即覆盖屏幕的宽度。怎么办呢？

Answer 1

我已将以下代码段添加到样式中：

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

这将使您的标签和输入标签占据浏览器的整个宽度，并在其底部添加一些边距。

        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">
          
		  <label for="pfnumber">PF Number:</label>
          <input type="text" id="name" name="pfnumber">
		  
		  <label for="cpname">Contact Person Name:</label>
          <input type="text" id="name" name="cpname">
		  
		  <label for="cnumber">Contact Number:</label>
          <input type="text" id="name" name="cnumber">
		  
            </div>
		  <hr> </hr>
		  
		  <!-- Input Fields -->
		  
          <div>
          
		  <label for="customer">Customer:</label>
          <input type="text" id="name" name="customer">
		  
		  <label for="cif">CIF Number:</label>
          <input type="text" id="name" name="cif">
		  
		  <label for="dfgt">If exporter, mention DGFT No. : </label>
          <input type="text" id="name" name="dfgt">
		  
		  <label for="activity">Activity:</label>
          <input type="text" id="name" name="activity">
		  
          </div>
          
		  <hr />

         </fieldset>
        </center>
        </form>
        </body>

Answer 2

您可以使用表单元素

更改width:100%

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

＆＃13;

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

＆＃13;

 <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">
          
		  <label for="pfnumber">PF Number:</label>
          <input type="text" id="name" name="pfnumber">
		  
		  <label for="cpname">Contact Person Name:</label>
          <input type="text" id="name" name="cpname">
		  
		  <label for="cnumber">Contact Number:</label>
          <input type="text" id="name" name="cnumber">
		  
            </div>
		  <hr> </hr>
		  
		  <!-- Input Fields -->
		  
          <div>
          
		  <label for="customer">Customer:</label>
          <input type="text" id="name" name="customer">
		  
		  <label for="cif">CIF Number:</label>
          <input type="text" id="name" name="cif">
		  
		  <label for="dfgt">If exporter, mention DGFT No. : </label>
          <input type="text" id="name" name="dfgt">
		  
		  <label for="activity">Activity:</label>
          <input type="text" id="name" name="activity">
		  
          </div>
          
		  <hr />

         </fieldset>
        </center>
        </form>
        </body>

＆＃13;

如何以合理的方式对齐表单元素？

2 个答案: