Question

我有一个要对齐文本框的屏幕，以便它们都位于同一位置。下面是未对齐的屏幕截图：

我的代码：

<label>File Name:&emsp;</label>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
<br><br>
<label>URL Link:&emsp; </label>
<input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
<br><br>
<label>Start Date:&emsp;</label>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly>
<br><br>
<label>End Date:&emsp; </label>
<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required />
<br><br>
<label>Enable:&emsp;&emsp; </label>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked />On &nbsp;
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" /> Off &nbsp;

注意：label目前未使用。

我正在使用&emsp，显然无法使它们对齐。一直试图解决这个问题一个小时。有什么方法可以实现我想要的吗？

Answer 1

CSS Grid是申请表格的最简单方法。

表单是一个二维数组，为此目的设计了网格。表格数据，无需表格。

这是一个简单的例子：

Answer 2

方法1：将宽度设置为<label>

label {
  display: inline-block;
  width: 100px;
}

<label>File Name:</label><input type="text" size="30" name="Filename" value="<%=files%>" readonly><br><br>

<label>URL Link:</label><input type="text" size="100" name="URL Link" value="<%=url%>" readonly><br><br>

<label>Start Date:</label><input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly><br><br>

<label>End Date:</label><input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>"  readonly required/><br><br>

<label>Enable:</label>
<input class="mandatory" type="radio"  name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio"  name="radioEnableStatus" value="0" />Off

方法2：使用<table>

<table>
  <tr>
    <td>
      <label style="display:inline-block;width:120px;">File Name:</label>
    </td>
    <td>
      <input type="text" size="30" name="Filename" value="<%=files%>" readonly>
    </td>
  </tr>
  <tr>
    <td>
      <label style="display:inline-block;width:120px;">URL Link:</label>
    </td>
    <td>
      <input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
    </td>
  </tr>
  <tr>
    <td>
      <label style="display:inline-block;width:120px;">Start Date:</label>
    </td>
    <td>
      <input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly>
    </td>
  </tr>
  <tr>
    <td>
      <label style="display:inline-block;width:120px;">End Date:</label>
    </td>
    <td>
      <input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>"  readonly required/>
    </td>
  </tr>
  <tr>
    <td>
      <label style="display:inline-block;width:120px;">Enable:</label>
    </td>
    <td>
      <input class="mandatory" type="radio"  name="radioEnableStatus" value="1" checked/>On
      <input class="mandatory" type="radio"  name="radioEnableStatus" value="0" />Off
    </td>
  </tr>
</table>



<br><br>

Answer 3

您可以使用fieldset

label{
display:inline-block;
width:200px;
margin-right:30px;
text-align:right;
}

fieldset{
border:none;
width:500px;
margin:0px auto;
}

<fieldset>
<label>File Name:</label><input type="text" name="Filename" value="<%=files%>" size="20" readonly>
<label>URL Link:</label><input type="text" name="URL Link" value="<%=url%>" size="20" readonly>
<label>Start Date:</label><input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" size="20" readonly>
<label>End Date:</label><input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" size="20" readonly>
<label>Enable:</label> <input class="mandatory" type="radio"  name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio"  name="radioEnableStatus" value="0" />Off 
</fieldset>

还有div

form {min-width:30em}
.labels {float:left; line-height:1.7em; padding-right:.3em}
.inputs {line-height:1.7em}
fieldset{border:none;}

<form method="post" action="#">
    <fieldset>
    <div class="labels">
        File Name:<br>
        URL Link::<br>
        Start Date:<br>
        Start Date:<br>
        Enable:<br>
    </div>
    <div class="inputs">
        <input type="text" name="Filename" value="<%=files%>" size="20" readonly><br>
        <input type="text" name="URL Link" value="<%=url%>" size="20" readonly><br>
        <input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" size="20" readonly><br>
        <input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" size="20" readonly><br>
        <input class="mandatory" type="radio"  name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio"  name="radioEnableStatus" value="0" />Off 
    </div>
    </fieldset>
</form>

Answer 4

这可以通过单独使用HTML或包括一些CSS样式元素来完成。可以通过使用HTML表并将数据放在不同的行中来执行唯一的HTML方法，这将自动对齐文本框。我正在为前两个字段上载示例代码。其余的您可以使用类似的实现。

<table>
<tr>
	<th><label>File Name</label></th>
	<td><input type="text" size="30" name="Filename" value="<%=files%>" readonly> </td>
	
</tr>
<tr> 
	<th> URL Link </th>
	<td> <input type="text" size="100" name="URL Link" value="<%=url%>" readonly></td>
</tr>
</table>

Answer 5

您可以尝试使用float属性

<div style="width:100%"> <div style="width:100%"> <label style="width:30%">File Name:&emsp;</label> <input type="text" size="30" name="Filename" value="<%=files%>" readonly style="float:right;height:100%;width:70%"> </div> <br/> <div style="width:100%"> <label style="width:30%">URL Link:&emsp;</label> <input type="text" size="100" name="URL Link" value="<%=url%>" readonly style="float:right;height:100%;width:70%"> </div> <br/> <div style="width:100%"> <label style="width:30%">Start Date:</label> <input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly style="float:right;width:70%"> </div> <br/> <div style="width:100%"> <label style="width:30%">End Date:</label> <input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required style="float:right;width:70%"/> </div> <br/> <div style="width:100%"> <label style="width:30%">Enable:</label> <div style="float :right;width:70%"> <input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On   <input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off </div> </div> </div>

Answer 6

.box{
    display:flex;
    align-items:center;
    width:100%
 }
 input[type=text]{
    width:350px
 }



<div class="box">
   <label>File Name:&emsp;</label>
   <input type="text" size="30" name="Filename" value="<%=files%>" readonly>
</div>
<br><br>
<div class="box">
   <label>URL Link:&emsp; </label>
   <input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
</div>
<br><br>
<div class="box">
   <label>Start Date:&emsp;</label>
   <input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" 
   value="<%=currentDate%>" readonly>
</div>
<br><br>
<div class="box">
   <label>End Date:&emsp; </label>
   <input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value=" 
   <%=defaultDate%>" readonly required />
</div>
<br><br>
<div class="box">
   <label>Enable:&emsp;&emsp; </label>
   <input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked 
   />On &nbsp;
  <input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off 
  &nbsp;
</div>

CSS-如何对齐所有文本框？

6 个答案: