的CSS無表格的形式與柔性標籤

我有聯繫的網站，包含大量的形式，這是傾向於通過對準標籤設置樣式：的CSS無表格的形式與柔性標籤

<form> 
    <label for="name"><input type="text" name="name"> 
    <label for="name"><input type="text" name="name"> 
    <label for="name"><input type="text" name="name"> 
</form>

我最常做的就是效果：

label{ 
    width: 150px /* fixed that is */ 
    text-align: right; 
}

這很好，但不是當我的多種形式，有時非常不同，和更長的標籤名稱，這在結果迫使我給最小的必要寬度，對於最大的元素，如果我想所有的形式完全對齊垂線。但是，當內容不多時，差距正在縮小，結果總體上不夠靈活。

有沒有人有解決這個問題的想法？也許Css或jQuery（不知道它是否有效）？但我對jQuery的想法是從特定的表單（在同一頁面上有時候會有很少不同的表單）循環.width（），然後從中選擇max，然後將它作爲寬度賦予它們的父級，但這看起來像是一個麻煩的解決方案。

來源

2012-05-30 Malyo

在jQuery中創建它將是微不足道的。附：你確定你不應該只使用一張桌子嗎？ – PeeHaa

它給了我更多的靈活性，因爲有時候我希望我的表單只是水平的，有時純粹是垂直的，這使我想保持我的html儘可能乾淨 – Malyo

好的，這個怎麼樣...

使用百分比寬度和float：left。長標籤將包裝成多行（這不完全是你要求的，我知道）。

HTML：

<form> 
    <label for="name">lka;sjdl kfa jsldkkfjlkasdjf alkdsjalkfk asdfasd asd fasdf dfdsa afsd afdsf asdfsdads jdaslk </label> 
    <input type="text" name="name"> 
    <label for="name">ljlkjljljljljlkj</label> 
    <input type="text" name="name"> 
    <label for="name">asdfasfdsasdaf</label> 
    <input type="text" name="name"> 
</form>

CSS：

form { 
    width:400px; 
} 
label { 
    width: 48%; 
    float:left; 
    clear:both; 
} 
input { 
    width: 48%; 
    float: left; 
}

我找到你需要有總寬度加起來分數低於100％，佔繼承的邊界和利潤等我確定49％將通過反覆試驗來發揮作用。

僅在Firefox中測試。

來源

2012-05-31 08:48:50

的CSS無表格的形式與柔性標籤

回答

相關問題