html - css-如何对齐所有文本框？

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是获取表单的最简单方法。

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

这是一个简单的例子:

.grid {
  display: grid;
  grid-template-columns: 100px 400px;
  grid-gap: 10px;
}

<div class="grid">
  <label>File Name:</label>
  <input type="text" size="30" name="Filename" value="<%=files%>" readonly>

  <label>URL Link:</label>
  <input type="url" size="100" name="URL Link" value="<%=url%>" readonly>

  <label>Start Date:</label>
  <input class="txtStartDate" type="date" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly>

  <label>End Date:</label>
  <input class="txtEndDate" type="date" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required/>

  <label>Enable:</label>
  <div>
    <input id="on" class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>
    <label for="on">On</label>
    <input id="off" class="mandatory" type="radio" name="radioEnableStatus" value="0" />
    <label for="off">Off</label>
  </div>
</div>