Question

具体来说，我指的是你需要在DIV上有100％的总宽度，但是10像素填充和1像素边框的情况。（并且不要依赖浏览器自动将其设置为该宽度 - 例如，它会向左浮动。）

有没有简单的方法可以在不使用JavaScript的情况下完成此操作？

Answer 1

不，没有办法在一个适用于当前主流浏览器的元素上设置它。

您可以使用2个嵌套div。在外侧100%上设置div宽度，并在内部div上设置填充和边框。

Answer 2

如果您使用box-sizing: border-box，则可以设置width: 100%; border: 1px solid black; padding: 10px;，宽度，边框，边距和填充的总和将是为宽度指定的内容。 Source

编辑：没错，浏览器支持有点受限。 FF 3.5和Safari 4支持它，不确定IE8或Chrome。

Answer 3

只有CSS 3才能实现。

Answer 4

以下解决方案如何？

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Content with Menu</title>         
    <style type="text/css">
      .content .outer{
        width:100%;
        border:1px solid black;
        background-color:green;
      }
      .content .inner{
        margin-left:10px;
        margin-right:10px;
        background-color:red;
      }
    </style>          
    </head>
    <body>    
    <div class="content">
      <div class="outer">
        <div class="inner">  
          <p>Hi!</p>
        </div>
      </div>
    </div>
    </body>
</html>

<强>更新好的，只用一个元素就无法实现你所说的。

如何在CSS中的一个元素中处理基于百分比和像素的大小？

4 个答案: