在輸入字段旁邊的兩行上輸入標籤

我希望有一個與輸入字段關聯的標籤。一些標籤需要多行。但是，我無法查看文本。我想實現如下所示：在輸入字段旁邊的兩行上輸入標籤

標籤1 <input />
子文本標籤1

代碼我目前有如下：

<div class="row">
<label for="height">Height (help text here)</label>
<input name="height" id="height" ... />
</div>

CSS：

form { width: 100%; overflow: hidden; margin-top: -20px;}

form .row { height: 100%; overflow: hidden; padding-left: 140px; width: 295px; line-height: 30px; position: relative; margin-bottom: 6px; }

form label { position: absolute; top: 0; left: 0; line-height: 32px; text-align: left; width: 110px; font-size: 14px; display: inline-block}

有幾行需要像這樣格式化。感謝您提供任何幫助。

來源

2011-02-16 Rosemary

有一個強大的，合理的情緒，以避免使用表僅用於佈局的目的。然而，當你提到有多行時，這讓我覺得這可能是使用表格時有意義的那種情況之一。 – GreenMatt 2011-02-16 16:11:46

對於我重寫的浮動輸入引導作爲問題的根 – 2014-09-15 07:30:23

<div class="row"> 
    <label for="height">Height <br /><span>(help text here)</span></label> 
    <input name="height" id="height" ... /> 
</div> 


label { 
    display: block; 
    float: left; 
}

使標籤塊元素，所以你可以把BR。不是一個很好的解決方案，但也它的工作原理：P

來源

2011-02-16 15:57:16 corroded

試試這個：

<div class="row"> 
<label for="height">Height (help text here)</label><input name="height" id="height" ... /><br/> 
<label for="height">Sub text</label> 
</div>

它可能是一個解決方法，您的問題，但沒有一個完美的解決方案

來源

2011-02-16 15:54:47 3rgo

當我嘗試兩個標籤相互重疊，但與輸入字段內聯。 – Rosemary 2011-02-16 15:58:31

我編輯了我的代碼，我忘了`
`。如果沒有** CSS，我可以按照你的意願去解決它們：`position：absolute`使它們確實重疊 – 3rgo 2011-02-16 16:01:21

如何：

<div class="row"> 
<label for="height">Height</label> 
<input name="height" id="height" ... /> 
<label for="height" class="help">help text here</label> 
</div>

和CSS：

.row label { 
    display: inline-block; 
    width: 40%; 
} 

.row input { 
    display: inline-block; 
    width: 50%; 
    margin: 0 0 0 5%; 
} 

.row label.help { 
    display: block; 
}

JS Fiddle demo。

來源

2011-02-16 16:07:15

在輸入字段旁邊的兩行上輸入標籤

回答

相關問題