CSS：如何讓輸入欄自動調整其寬度

我有一個叫做包裝的div。它使用margin屬性水平居中。該包裝的寬度是fixed.Inside包裝我有一個標籤後面跟着一個輸入字段。我正在尋找的是輸入字段的寬度自動調整到剩餘的寬度在右邊（直到包裝的邊界）。我想避免以像素爲單位定義寬度。我嘗試了一些東西，但沒有任何工作（例如寬度自動或100％）。希望清楚並希望有人能夠提供幫助。CSS：如何讓輸入欄自動調整其寬度

FIDDLE：http://jsfiddle.net/72sPT/

HTML：

<div id="wrapper"> 
    <a>this is a button</a> 
    <input type="text"/> 
</div>

CSS：

#wrapper { 
    width: 600px; 
    margin: 10px auto; 
    background: blue; 
}

來源

2012-12-01 Marc

對不起這裏http://jsfiddle.net/72sPT檢查/ 2/ – Tkingovr

這個想法是，我想寬度自動採取右側的整個剩餘空間。如果我把100％的解決方案，有一個換行符和輸入字段放在下一行... – Marc

嘗試一個HTML文檔我認爲換行是因爲jsfiddle中有限的空間。 – Tkingovr

如果換在另一個DIV輸入的標籤，你可以這樣做：

#wrapper { 
    width: 600px; 
    margin: 10px auto; 
    background: blue; 
} 
#wrapper a { 
    float: left; 
} 
#wrapper div { 
    overflow: hidden; 
} 
#wrapper input { 
    width: 100%; 
}

來源

2012-12-01 10:39:38

你好肯尼斯。謝謝。你的主張正在起作用。奇怪的是，當寬度設置爲100％時出現溢出。輸入的右邊界被隱藏。爲了避免這種情況，我必須將其設置爲99％。但這對我來說很好。再次感謝:) – Marc

@Marc，這是因爲使用框模型/大小（其中寬度不包括填充和邊框）。你可以設置'box-sizing：border-box'來包含它們，並在'width：100％'時獲得一個合適的輸入。 – Qtax

-1

如果你正在尋找與您<a>標籤混亂，那麼你可以浮動你輸入正確的：

jsFiddle

#wrapper { 
width:600px; 
margin:10px auto; 
background:blue; 
} 

#wrapper input { 
float:right; 
width:70%;  
}

來源

2012-12-01 10:42:38 JofryHS

你好jofry。感謝tryig幫助，但正如我所說的，我一直在尋找輸入字段來調整剩餘空間總量。不僅僅是它的一部分......無論如何感謝 – Marc

CSS：如何讓輸入欄自動調整其寬度

回答

相關問題