Html 一行中有两个输入字段，一个左对齐，另一个右对齐

我想要一个由不同输入字段组成的表单。在某些行上，应该有两个输入字段。第二个应该向右对齐

HTML:

<table>
    <tr>
        <td>
            <input type="text" name="first-name" class="form-first-name" />&nbsp;
            <input type="text" name="last-name" class="form-last-name" />
        </td>
    </tr>
    <tr>
        <td class="empty-row">&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="text" name="address-1" class="form-address-1" />
        </td>
    </tr>
</table>

.form-address-1 {
    width: 100%;
}

.form-first-name, .form-last-name {
    width: 46%;
}

.form-last-name {
    float: right;
}

---

我的问题是，输入字段的大小不同，因此行的大小会有所变化。我试图设置

tr

的宽度，但没有成功。如何将第二个输入字段对齐？

设置表格的宽度，而不是tr。

设置表格的宽度，而不是tr。

使用

min-width:

并使用

。表格名{float:left；}

使用

min-width:

并使用

表格名{float:left；}

这是一个方框布局问题

检查检查器，您将看到您的地址输入溢出了它的行。 （这是因为100%+默认边距/填充=超过100%）

将此添加到CSS中

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

---

这是一个框布局问题

检查检查器，您将看到您的地址输入溢出了它的行。 （这是因为100%+默认边距/填充=超过100%）

将此添加到CSS中

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

你可以这样做：

 <td>
      <span style="float:left">
          <input type="text" name="first-name" class="form-first-name" /></span>
       <span style="float:right">
           <input type="text" name="last-name" class="form-last-name" /></span>
 </td>

你可以像这样做：

 <td>
      <span style="float:left">
          <input type="text" name="first-name" class="form-first-name" /></span>
       <span style="float:right">
           <input type="text" name="last-name" class="form-last-name" /></span>
 </td>

---

。表单姓氏与
相比未完全对齐右侧。表单地址-1
。表单姓氏与
相比未完全对齐右侧。表单地址-1
在我的响应布局中，我不想设置宽度。。。但是我试过了，
。form last name
没有完全对齐到右边。它应该与
.form-address-1
处于同一级别，并向右对齐。在我的响应布局中，我不想设置宽度。。。但是我试过了，
。form last name
没有完全对齐到右边。它应该与
.form-address-1
处于同一级别，并向右对齐。嗯，我做错了什么？我在桌子上设置了
min width
，我设置了
float:left
，正如你所说，但是
。form last name
没有完全向右对齐……嗯，我做错了什么？我在桌上设置了
min width
，我设置了
float:left
，正如您所说，但是
。form last name
没有完全向右对齐…谢谢。因此，删除边距/填充或减小尺寸应该比！我检查了浏览器对
框大小的支持，似乎IE7无法处理这个问题。因此，我将宽度从
.form-address-1
设置为99%，这在我的第一次测试中起到了作用。谢谢。因此，删除边距/填充或减小尺寸应该比！我检查了浏览器对
框大小的支持，似乎IE7无法处理这个问题。因此，我将宽度从
.form-address-1
设置为99%，并且在我的第一次测试中起作用。