input寬度自適應的問題

xushaojieaaa 發布于2019-08-29 11:19 / 1266人閱讀

摘要：在很多地方看到過這樣的問題，就是關于寬度設置的問題。如圖，圖中黑色框就是設置了后，輸入框的展現，很是蛋疼。可以移步到查看更多文章

在很多地方看到過這樣的問題，就是關于input寬度設置的問題。

如圖，圖中黑色框就是設置了100%后，input輸入框的展現，很是蛋疼。

針對與上述問題：

這是我的幾種方法，你試試，想用哪種用哪種，好處：簡單，不需要任何 script 代碼

 
問題出在了input的邊框問題 ,默認有border-style: inset邊框2象素
在包含input的div中 可以加上面代碼padding-right減去邊框就行
如果不需要太長的input，可以設置input寬度為99%
也可以不加任何代碼，但需要把input 邊框去掉 如：border: none;
去掉邊框后，在input的外面套一個div元素，或者你覺得合適的元素 ，把div元素設置上邊框，可以實現你要的效果。

可以移步到blog：sundexin.com 查看更多文章

云服務器 GPU云服務器 html的寬度自適應自適應寬度寬度自適應自適應寬度按鈕

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111565.html

<input> 寬度自適應變化

摘要：要實現上述的效果輸入框的寬度隨著輸入的文字長度變化。而這個標簽有自己的想法，如果沒有給它設置一個固定的寬度，它就會有一個默認的不變的寬度，想讓它動態伸展是不可能。 showImg(https://segmentfault.com/img/bVbso8j?w=276&h=62); 要實現上述的效果：輸入框的寬度隨著輸入的文字長度變化。而這個標簽有自己的想法，如果沒有給它設置一個固定的寬度...

wangbjun 2019-08-02 16:17 評論0 收藏0
<input> 寬度自適應變化

摘要：要實現上述的效果輸入框的寬度隨著輸入的文字長度變化。而這個標簽有自己的想法，如果沒有給它設置一個固定的寬度，它就會有一個默認的不變的寬度，想讓它動態伸展是不可能。 showImg(https://segmentfault.com/img/bVbso8j?w=276&h=62); 要實現上述的效果：輸入框的寬度隨著輸入的文字長度變化。而這個標簽有自己的想法，如果沒有給它設置一個固定的寬度...

levy9527 2019-08-30 10:50 評論0 收藏0
總結開發過程踩到的坑（二）

摘要：本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結，不斷提升自己。本文章旨在總結開發過程中碰到的容易忘記或者比較重要的...

laznrbfe 2019-08-22 14:06 評論0 收藏0
前端小姿勢

摘要：文章包含學習中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完或者非最佳實踐僅供參考父子組件的參考官方文檔點我父級不需要操作額外代碼子代操作方法一這個的官方會有介紹子代操作方法二通過這個實現的看了不少文章，這種比較多以為例子先簡單介紹文章包含學習中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完... 或者非最佳實踐僅供參考 1.父子組件的v-model 參考vue官方文檔...

JeOam 2019-08-02 16:11 評論0 收藏0