一行中的兩個輸入字段，左對齊和右對齊

我想要一個由不同輸入字段組成的表單。在某些行上應該有兩個輸入字段。第二個應該對齊。一行中的兩個輸入字段，左對齊和右對齊

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沒有成功。我怎樣才能對齊第二個輸入字段？

來源

2013-09-26 testing

其箱型佈局問題。

檢查與檢查員，你會看到你的地址輸入溢出其行。（那是因爲100％+默認保證金/填充= 100％以上）

Working Fiddle

添加到您的CSS

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

來源

2013-09-26 20:32:39 avrahamcool

謝謝。所以刪除邊距/填充或減小尺寸應該比！我檢查了瀏覽器對「box-sizing」的支持，似乎IE7無法處理它。所以我將寬度從'.form-address-1'設置爲99％，並且在我的第一個測試中工作。 – testing

@測試的確如此。不要忘記將答案標記爲已接受。 – avrahamcool

設置表格的寬度，而不是tr。

來源

2013-09-26 20:28:16 andi

在我的響應式佈局中，我不想設置寬度...但我試過了，'.form-last-name'沒有完全對齊右側。它應該和'.form-address-1'在同一層，並且與右邊對齊。 – testing

化妝用的min-width:，也使.form-first-name{float:left;}

來源

2013-09-26 20:29:51 vishalkin

嗯我做錯了什麼？我在桌子上設置了'min-width'，並按照你所說的設置了'float：left'，但'.form-last-name'沒有完全對齊到右邊... – testing

你可以不喜歡它：

<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-26 20:34:52

'.form-last-name'與'.form-address-1'相比並沒有完全對齊右側。 – testing

一行中的兩個輸入字段，左對齊和右對齊

回答

相關問題