輸入框100％寬度，左邊有標籤

我試圖讓一個流暢的輸入框具有100％的寬度，同時標籤漂浮在左邊。這是我目前有：輸入框100％寬度，左邊有標籤

.left { 
    float: left; 
} 

input { 
    width: 100%; 
} 

<form> 
    <label class="left">Name:</label> 
    <input class="left" id="name" name="name"/> 
    <div class="clear"></div> 
</form>

這樣的作品，但它落在標籤下面。如果我使用父div來分配浮動，那麼它不會100％。有任何想法嗎？

謝謝！

來源

2011-07-15 dzm

你在做什麼怎麼辦？您是否想要將輸入框和標籤放在同一行上？如果您有一個100％容器寬度的輸入框，則在同一行上沒有空間放置標籤，因此不可能這樣做。 – Will

參見：http://jsfiddle.net/r2769/（調整窗口大小）

CSS：

.left { 
    float: left; 
} 

.left2 { 
    overflow: hidden; 
    display: block; 
    padding: 0 4px 0 10px 
} 
.left2 input { 
    width: 100% 
}

HTML：

<form> 
    <label class="left" for="name">Name:</label> 
    <span class="left2"><input id="name" name="name" /></span> 
</form>

對方法is here的解釋。

來源

2011-07-15 21:45:49 thirtydot

+1我看到這個技巧越來越適用...;） – NGLN

是的，這真的非常有用:) – thirtydot

Thx爲聰明的想法在一個不錯的jsfiddle上說明。 – chikamichi

我最近發現了鈣在CSS：

width: calc(100% - 100px);

這可以用來解決這個問題：jsfiddle here

HTML：

<div class="setting"> 
    label 
    <input class="s2"/> 
</div>

CSS：

.setting { 
    position: relative; 
    width: 100%; 
} 
.setting .s2 { 
    position: absolute; 
    left: 180px; 
    width: calc(100% - 184px); 
}

來源

2013-10-25 22:16:01 jvilhena

有效，但在所有現代瀏覽器中都不支持（3個版本返回）。打破，最突出的是在Safari 5中 –

輸入框100％寬度，左邊有標籤

回答

相關問題