1. 首頁
  2. 問答
  3. 將填充添加到文本區將元素推到div的外部

將填充添加到文本區將元素推到div的外部

2013-10-16 23 views
4

我似乎無法將自己的想法包圍在這個區域中。將填充添加到文本區將元素推到div的外部

看來，通過添加一些填充（padding-left：3px）到我的textarea中，並且它將它從邊框中移出我的div。在摘要框中爲文本添加一些填充將會很有用，因爲它對用戶來說會更清晰。

下面是結果：enter image description here

這是它應該是什麼樣子： enter image description here

下面是HTML/CSS的標記：

<!DOCTYPE html> 

<html> 

<head> 
    <meta charset="utf-8"> 

<style type="text/css"> 
.fcontent_text { 
    font-size: 8.5pt; 
    text-align: right; 
    color: rgb(11,63,113); 
} 
#fcontent_container { 
    width: 800px; 
    display: block; 
    position: relative; 
    margin: 5px; 
} 
#fcontent_wrapper { 
    border: 1px solid rgb(128,128,128); 
} 
#summary { 
    width: 100%; 
    margin: 0; 
    border: 0; 
    position: relative; 
    padding-left: 3px; 
    height: 50px; 
} 
</style> 


</head> 

<body> 
       <div id="fcontent_container"> 
        <div class="fcontent_text">Summary</div> 
        <div id="fcontent_wrapper"><textarea class="normal" id="summary"></textarea></div> 
       </div> 
</body> 

</html>

來源

2013-10-16 John Smith

+0

你不能有'寬度：100％'和左或右填充 - 這就是爲什麼你溢出容器的邊緣。 – Wex

回答

6

添加box-sizing: border-box到#summary讓你可以同時設置width: 100%和左側和右側填充，而不會將內容溢出到容器中。

box-sizing

border-box

  • 的寬度和高度屬性包括填充和邊界，而不是幅度。這是Internet Explorer在文件處於怪癖模式時使用的盒子模型。

對於跨瀏覽器的兼容性，一定要包括前綴：

#summary { 
    width: 100%; 
    margin: 0; 
    border: 0; 
    position: relative; 
    padding-left: 3px; 
    height: 50px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

來源

2013-10-16 20:27:17 Wex

1

使用框上漿
您可以使用box-sizing: border-box;
檢查了這一點：http://codepen.io/gopkar/pen/HiEjn

沒有箱子尺寸
更改您的textarea的寬度從width: 100%到width: 795px;
看一看http://codepen.io/gopkar/pen/csxKo
width = <div-width> - <padding-you-have-given>

來源

2013-10-16 20:30:17

+0

爲了使用'795px'，我必須從'