如何使輸入完整寬度但右側有文字？

.wrap { 
 
    white-space: nowrap; 
 
} 
 
input { 
 
    width: 100%; 
 
} 
 
body { 
 
    /* just so you can see it overflowing */ 
 
    border: 1px solid black; 
 
    margin: 40px; 
 
    padding: 10px; 
 
}

<span class="wrap"><input type="text">.pdf</span>

從上面的例子中，你會看到「.PDF」被壓入容器外。我怎樣才能使它適合緊貼沒有設置固定寬度的文本？

「.pdf」文本是可變的，不能被硬編碼。

來源

2016-09-13 mpen

我的回答不適合你？ – dippas

@dippas確實如此，但我還在等待有人提出一個不依賴於Flexbox的解決方案。支持仍然[不是很好]（http://caniuse.com/#search=flexbox）。 – mpen

我已經嘗試了一些與您的要求有關的東西，我猜你已經不在運氣之外了，但我會拭目以待:) – dippas

您可以使用flexbox爲

.wrap { 
 
    display: flex 
 
} 
 
input { 
 
    flex: 1 
 
} 
 
body { 
 
    /* just so you can see it overflowing */ 
 
    border: 1px solid black; 
 
    margin: 40px; 
 
    padding: 10px; 
 
}

<span class="wrap"><input type="text">.pdf</span>

來源

2016-09-13 21:51:19 dippas

如何使輸入完整寬度但右側有文字？

回答

相關問題