0

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

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没有成功。如何正确对齐第二个输入字段？

4

4 回答 4

3

你可以这样做：

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

于 2013-09-26T20:34:52.647 回答
2

它是一个盒子布局问题。

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

工作小提琴

将此添加到您的 CSS

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-09-26T20:32:39.517 回答
0

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

于 2013-09-26T20:28:16.693 回答
0

利用min-width:也使.form-first-name{float:left;}

于 2013-09-26T20:29:51.650 回答