填充內的輸入中斷寬度100％

好吧，所以我們知道設置填充到對象會導致寬度改變，即使它被明確設置。雖然人們可以爭論這背後的邏輯，但它會導致一些問題。填充內的輸入中斷寬度100％

對於大多數情況下，您只需添加一個子元素並將填充添加到該元素，而不是將其設置爲100％，但對於表單輸入而言，這不是一個可能的步驟。

在此請看：http://sandman.net/test/formcss.html

第二輸入有其填充設置爲5px的這一點我非常喜歡的默認設置。但不幸的是，這使得輸入在所有方向上增加了10px，包括在100％寬度上添加10px。

這裏的問題是，我不能在輸入內添加一個子元素，所以我無法修復它。所以問題是：

有沒有辦法在輸入內添加填充，同時仍然保持寬度100％？它必須是100％，因爲表格會以不同的寬度父母呈現，所以我不知道父母的寬度。

2009-09-04 Sandman

請參閱http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers/628912#628912瞭解如何使用CSS3' box-sizing'屬性 – 2010-04-21 20:13:52

+11

只需要說，謝謝你保持你的示例頁面一直在上。當有人在問題中發佈網址時驅動我瘋狂，並且在答案被回答後或者他們不使用jsfiddle之類的東西時它就停止了。 – 2011-10-07 07:49:43

關於使用box-sizing屬性;我的問題是同樣的問題，但與高度 - 設置高度單獨意味着100％意味着高度+邊框+填充=容器高度。爲了讓輸入具有容器的實際高度，我只需要使用 box-sizing：content-box。 – Skychan 2015-09-14 18:33:01

我不知道它是瀏覽器如何交叉兼容（它工作在Firefox和Safari），但你可以嘗試這樣的解決方案：

DIV.formvalue { 
padding: 15px; 
} 
input.input { 
margin: -5px; 
}

（僅貼，我改變的值）

來源

2009-09-04 07:39:29 michaelk

它在IE中導致問題。 – Tarik 2009-09-04 07:42:14

我寧願使用標準代碼來實現這樣一個「簡單」的事情...... – Sandman 2009-09-04 07:45:19

那麼，這並不令我驚訝:)不要認爲沒有改變標記就有一個簡單的跨瀏覽器解決方案。 – michaelk 2009-09-04 07:45:53

-1

只有我知道爲了防止這種情況，分配的值如100％-10。但它有一些兼容性問題。

來源

2009-09-04 07:35:44 Tarik

也許將邊框+背景從input中取出，並將其放在div中，邊框+背景和寬度爲100％，並在input上設置邊距。

來源

2009-09-04 07:44:37 Amber

這就是那種黑客I目前正在使用這個問題，但我寧願在輸入中使用邊框來表示「風格原因」或什麼。但是，是的，這是我目前的工作方式，因此這是一個可行的解決方案 – Sandman 2009-09-04 07:54:58

一種選擇是將INPUT換成DIV，其中有填充。

CSS：

div.formvalue { 
    background-color: #eee; 
    border: 1px solid red; 
    padding: 10px; 
    margin: 0px; 
} 

div.paddedInput { 
    padding: 5px; 
    border: 1px solid black; 
    background-color: white; 
} 

div.paddedInput input { 
    border: 0px; 
    width: 100%; 
}

HTML：

<div class="formvalue"> 
    <div class="paddedInput"><input type="text" value="Padded!" /></div> 
</div>

來源

2009-09-04 07:50:22 user7116

填充容器div會產生不相同的結果，以便將填充添加到輸入字段。 – 2012-06-05 00:29:02

添加到Felix Fung所說的 - 你失去了在填充區域用鼠標點擊的能力，並且使它集中注入輸入字段 - 還有其他更爲顯着的問題。只是想指出這個較小的問題/已知問題 - 使用這種黑客的網頁時，它讓我感到無法接受。 – eselk 2013-02-14 05:08:59

我一直在與一些類似的一些問題。我有100％的輸入和一個小填充的tds。我所做的就是彌補填充的TD如下：

.form td { 
    padding-right:8px; 
} 

.form input, .form textarea { 
    border: 1px solid black; 
    padding:3px; 
    width:100%; 
}

8像素的填充，包括輸入/ textarea的邊框和填充。希望這有助於！

來源

2011-11-01 15:17:19 Keye

這項技術非常適用於對包含填充輸入的單元格的寬度進行排列，而單元格不包含這些單元格。只需將填充權限選擇性地應用於包含100％寬度輸入的任何TD。 – 2012-02-04 14:34:09

我找到的一個解決方案是使用相對定位的父標籤絕對定位輸入。

<p class="full-width-input"> 
    <input type="text" class="text /> 
</p>

的應用樣式：

p.full-width-input { 
    position: relative; 
    height: 35px; 
} 

p.full-width-input input.text { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    padding: 5px; 
}

唯一要注意的是，該段標籤需要一個高度設定爲絕對定位的孩子不會擴大其高度。這避免了通過將其鎖定到父元素的左側和右側來設置width: 100%的需要。

來源

2012-03-16 11:56:35 Gabz

測試..它不工作...你可以請發表演示？ – mrdaliri 2012-12-30 13:50:36

211

使用CSS3，你可以使用屬性箱上漿改變瀏覽器如何計算與輸入的。

input.input { 
    width: 100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    }

你可以閱讀更多關於它在這裏：http://css-tricks.com/box-sizing/

來源

2012-12-17 16:29:20

+1，如果我的老闆最後決定放棄對IE7的支持，那麼一定不能使用太多..他是超級老派。 – eselk 2013-02-14 05:10:48

@VíctorDieppa Garriga謝謝，這是一個很好的解決方案。 – sinanakyazici 2013-04-02 10:01:03

支持如下：Chrome（任何）：盒子大小調整 Opera 8.5+：盒子大小調整 Firefox（any）：-moz-box-sizing Safari 3：-webkit-box-sizing（在5.1+版本中前綴不變） IE8 +：盒子大小。此外，我推薦這個接受的答案，這是一個更優雅的解決方案。 – Baconbeastnz 2013-10-08 23:51:53

嘗試使用百分比的填充：

.input { 

    // remove border completely 
    border: none; 

    // don't forget to use the browser prefixes 
    box-shadow: 0 0 0 1px silver; 

    // Use PERCENTAGES for at least the horizontal padding 
    padding: 5%; 

    // 100% - (2 * 5%) 
    width: 90%; 

}

如果你擔心在舊版瀏覽器的用戶誰也看不出的盒子陰影，只需輸入一個微妙的背景色作爲備份。如果你使用像素來處理這類事情，那麼你有可能在其他地方使用它們，這可能會帶來一些額外的挑戰，如果遇到它們，請告訴我們。

來源

2013-01-30 21:28:53 stephenmurdoch

經常被人們遺忘calc可以來這裏的救援：

input { 
    width: calc(100% - 1em); 
    padding: 0.5em; 
}

因爲我們知道填充將增加元素的寬度，我們只是從整體寬度減去填充。它受到所有主流瀏覽器的支持，響應迅速，並且不需要混亂的包裝器。

來源

2017-09-30 04:34:46 XanderStrike

填充內的輸入中斷寬度100％

回答

相關問題