爲什麼<input>元素不尊重最小寬度？

http://jsbin.com/nuzazefuwi/1/edit?html,css,output 爲什麼<input>元素不尊重最小寬度？

在上面的鏈接中，文本框應該只有10px，而不是寬度爲152px。

這是代碼：

.input { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.cont { 
 
    padding: 2px; 
 
} 
 

 
.main { 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    min-width: 15px; 
 
}

<div class='main'> 
 
    <div class='cont'> 
 
    <input type="text" class='input' /> 
 
    </div> 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> the textbox should have 10px

它看起來像輸入開始得到正確的寬度只有經過.mainmin-width比156px更大。

來源

2015-04-06 Omu

set'border：0;大綱：0'爲'input' – 2015-04-06 11:53:34

你想輸入字段寬度應該是10px？真的但如何？ – 2015-04-06 11:59:46

在您的演示文本框中顯示100％。 – user3386779 2015-04-06 12:00:40

還有就是size="20"上<input>類型的文本，搜索，電話，網址，電子郵件或密碼，大約一個默認值。 100px寬度（可因不同的瀏覽器和操作系統而異）。

對於父級，您設置了min-width:15px，這不會產生任何影響，因爲該值遠小於100px。如果將其更改爲width:15px或max-width:15px（或將其添加爲額外的規則），該功能將正常工作。

正如評論，或者您可以給size一個小值，如size="1"。

來源

2015-05-01 16:04:22 Stickers

該div需要自動展開，以防其內容發生變化（獲取更大），所以我不能設置寬度或最大寬度;如果內容的寬度至少爲152px – Omu 2015-05-02 08:21:25

設置'size ='1'''''''''''''''''''輸入幫助降低了限制，那麼所有的工作都正常（輸入寬度爲100％），看看http://jsbin.com/ jajebukota/1 /編輯，如果刪除一些文本/內容，.main將減少，輸入將保持100％ – Omu 2015-05-02 09:04:32

@Omu很高興看到你找到了解決方案:)我沒有這麼想，因爲我並不完全確定你想要達到的目標。 – Stickers 2015-05-02 13:02:18

改變你的CSS寬度爲155px

.input{ 
    width:155px; //Replace 100% to 155px 
box-sizing:border-box; 
}

來源

2015-04-06 11:51:22 user3386779

我需要的輸入寬度爲100％，我實際上使用atm的js解決方法來隱藏輸入，獲取寬度。main並設置.input的寬度;我想知道是否有一些css規則，我錯過了 – Omu 2015-04-06 11:52:30

的.main容器跨內，只有當你調整屏幕尺寸小，你會看到input實際上比小適合裏面的內容的寬度默認輸入寬度。如果您更改.main內容的width，您將觀察到input在大屏幕上將其更改爲默認width，並縮小至不低於min-width值。

.main{ 
    position:absolute; 
    border:1px solid black; 
    width: 75px; 
    min-width:15px; 
}

http://jsbin.com/xeyupinaja/3/edit

來源

2015-04-06 12:01:54

你有一個min-width集，但沒有max-width。

該教科書具有由瀏覽器設置的默認大小。該默認尺寸大於min-height，因此瀏覽器和CSS都很樂意讓該默認寬度發生並增加容器的寬度。

通過爲容器設置max-width或width，容器和輸入的大小將被限制並且其大小將相應地計算。

.main{ 
    position:absolute; 
    border:1px solid black; 
    min-width:14px; 
    max-width:140px; // What do you want here? 
}

我想這也是什麼@sdcr回答，他也給你有關默認大小和計算的細節。

來源

2015-05-02 15:31:42 Myst

爲什麼<input>元素不尊重最小寬度？

回答

相關問題