Как дополнить div, не расширяя границы? - PullRequest
Новая
       31

Как дополнить div, не расширяя границы?

7 голосов
/ 13 марта 2011

У меня есть этот код: 

<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 перед отступом.Я хочу, чтобы нижняя граница начиналась с 200 пикселей.Можно ли это сделать?

Ответы [ 4 ]

14 голосов
/ 13 марта 2011

Использовать поле вместо отступа или использовать внутренний 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/

1 голос
/ 16 мая 2018

Или с 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>

скрипка

1 голос
/ 13 марта 2011

Если это так, используйте это: 

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

Код CSS: 

.container {    
    padding-left:200px;
}
.content {    
    width:500px;
    border-bottom: 1px dotted #999999;
}
0 голосов
/ 13 марта 2011

Может быть вот так: margin-left

http://jsfiddle.net/ppMmy/

Свойства заполнения CSS определяют пространство между границей элемента и его содержимым.

Таким образом, не "дополняя" весь <div>

...