1. 首页
  2. 问答
  3. 将填充添加到文本区将元素推到div的外部

将填充添加到文本区将元素推到div的外部

2013-10-16 25 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'，我必须从'