在容器中固定填充3px的寬度百分比

我正在尋找一種解決方案，在不具有標準寬度但百分比的容器內添加3px填充（總是必須爲3px）。在容器中固定填充3px的寬度百分比

這是問題所在。我有一個表單框架，其標籤爲20％，表單元素爲80％

在容納表單元素（80％）的容器中，希望有一個3px的填充以包裝具有背景的表單元素。這意味着表單元素將不會有更多的3px背景。

我已經嘗試了一些解決方案，但迄今沒有任何工作，因爲我必須創建一個容器寬度80％和3px填充和內部設置窗體元素的寬度爲（80％-3px）。

示例代碼

<div id="formRow"> 
    <label style="width:20%;float:left;"> Label </label> 

    <div id="formElement" style="width:80%;float:left;"> 
     <input type="text" width="???????????" /> 
    </div> 
</div>

誰能幫助我做到這一點？

謝謝

來源

2011-08-29 ntan

@nthan;您可以使用CSS3屬性box-sizing這樣

CSS：

#formElement{ 
padding:3px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing:  border-box; 
width:80%; 
}

注：它不是在IE7工作

編輯：

如果你不想使用css3那麼你可以給margin它的child div而不是給padding它的parent div。

#formElement input{ 
margin:3px 
}

可能是'爲你工作。 enter code here

EDIT 2

檢查此鏈接它的工作http://jsfiddle.net/sandeep/Yf2zY/

來源

2011-08-29 07:27:47 sandeep

感謝您的回覆，但我並沒有在這個項目中使用css3 – ntan

即使如此，輸入的寬度是什麼？如果我將它設置爲100％，那麼它的錯誤是100％，因爲它的左右邊距實際上是100％減6px。使用這個我有3px的背景顏色，並且輸入邊框可以創建一個很好的灰色佈局 – ntan

嘗試刪除Float:left形成你formElement事業部，並添加style="border:solid 1px #333; padding:5px;"到formRow DIV

來源

2011-08-29 07:39:25

試試這個：

<div id="formRow" style="padding:0px 6px 0px 0px;"> 
    <label style="width:20%;float:left;"> Label </label> 

    <div id="formElement" style="width:80%;float:left; padding:3px;margin-right:-6px"> 
     input 
    </div> 
</div>

來源

2011-08-29 10:31:32 Nadin

在容器中固定填充3px的寬度百分比

回答

相關問題