Question

我有这段代码：

<html>
<head>
<style type="text/css">
.container {
    border-bottom: 1px dotted #999999;
    width:500px;
    padding-left:200px
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>

除了在缩进之前底部边框也应用于200px这一事实以外它工作正常。我希望底部边框以200px开始。可以这样做吗？

Answer 1

使用保证金而不是填充或使用内部div ..（更新以符合评论中披露的要求）

<html>
<head>
    <style type="text/css">
        .container {            
            width:500px;
            padding-left:200px
        }
        .inner{
            border-bottom: 1px dotted #999999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">
            asdf</div>
    </div>
</body>

这应该是这样的：http://jsfiddle.net/dKVTb/1/

Answer 2

如果是这种情况，请使用：

<div class="container">
    <div class="content">
        content here
    </div>
</div>

CSS代码：

.container {    
    padding-left:200px;
}
.content {    
    width:500px;
    border-bottom: 1px dotted #999999;
}

Answer 3

或 calc

<html>
  <head>
    <style type="text/css">
    .container {
        position: relative;
        width:500px;
        padding-left:200px
    }

    .container:after {
        content: '';
        width: calc(100% - 200px);
        position: absolute;
        left: 200px;
        bottom: 0px;
        border-bottom: 1px dotted black;
    }
    </style>
  </head>
  <body>
    <div class="container">asdf</div>
  </body>
</html>

fiddle

Answer 4

也许这样，margin-left

http://jsfiddle.net/ppMmy/

CSS填充属性定义元素边界和之间的空间元素内容。

因此，不“填充”整个<div>

如何填充div而不扩展边框？

4 个答案: