一行中的两个输入字段，一个左对齐，另一个右对齐答案

【问题标题】：Two input fields in one row, align one left and the other right一行中的两个输入字段，一个左对齐，另一个右对齐
【发布时间】：2017-09-24 06:12:19
【问题描述】：

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

jsFiddle

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>

CSS：

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

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

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

我的问题是输入字段的大小不同，因此行的大小会发生某种变化。我试图设置tr 的宽度但没有成功。如何将第二个输入字段对齐？

【问题讨论】：

标签： html css html-table input-field

【解决方案1】：

你可以这样做：

 <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>

http://jsfiddle.net/KxUgt/8/

【讨论】：

.form-last-name 与 .form-address-1 相比未完全对齐到右侧

【解决方案2】：

这是一个盒子布局问题。

检查检查员，您会发现您的地址输入溢出了它的行。（那是因为 100% + 默认边距/填充 = 超过 100%）

Working Fiddle

将此添加到您的 CSS 中

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

【讨论】：

谢谢。因此，删除边距/填充或减小尺寸应该比！我检查了浏览器对box-sizing 的支持，似乎IE7 无法处理。所以我将宽度从.form-address-1 设置为 99%，它在我的第一次测试中起作用。

【解决方案3】：

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

【讨论】：

在我的响应式布局中，我不想设置宽度......但我试过了，.form-last-name 与右侧并不完全对齐。它应该与.form-address-1 处于同一级别并向右对齐。

【解决方案4】：

使用min-width:，同时使用.form-first-name{float:left;}

【讨论】：

嗯我做错了什么？我在桌子上设置了min-width，并按照你说的设置了float:left，但是.form-last-name 没有完全对齐到右边...