Question

当div有padding-left:10px;时，有一种方法可以让该div的第一个孩子没有10px的填充左边;？您将在下面的示例中看到。不，我不能改变任何东西或添加更多的div等。

CODE：

<!DOCTYPE HTML>
<html>
    <head>
        <title> New Document </title>
        <style type="text/css">
            .root:first-child {
                padding-left:0px;
            }
            .root{
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class="root" style="padding-left:10px;border: 1px solid black;">
            <div>Root</div> //Padding should not affect this one. How can I do this?
            <div style="border:1px solid black; padding-left:10px;">Folder
                <div style="border:1px solid black; padding-left:10px;">Folder
                    <div>
                        <div>File 1</div>
                        <div>File 2</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

使用div.root:first-child{padding-left:0 !important;}然后告诉我。

您只需添加以下CSS即可：

.root{
    font-size:20px;
    padding-left:0 !important;
 }
.root div{
   margin-left:10px;
}
.root > div:first-child{
   margin-left:0;
}

在这里摆弄：http://jsbin.com/AgULeNO/1/edit?html,css,output

Answer 2

    <!DOCTYPE HTML>
    <html>
    <head>
        <title> New Document </title>
    <style type="text/css">
    .root:first-child {
    padding-left:0px;
    }
    .root>div:first-child{
         border: 1px solid red;
         width: 500px;
         height: 200px;
    }

    .root{
        border: 1px solid black;
        font-size:20px;

    }
    .root div:second-child(2) {
        padding-left:10px;

    }
    </style>

    </head>

    <body>

   <div class="root">
    <div>Root</div> //Padding should not affect this one. How can I do this?
    <div style="border:1px solid black; padding-left:10px;margin-left: 10px;">Folder
        <div style="border:1px solid black; padding-left:10px;">Folder
            <div>
                <div>File 1</div>
                <div>File 2</div>
            </div>
        </div>
    </div>
</div>

     </body>
    </html>
![enter image description here][1]


  [1]: http://i.stack.imgur.com/skWR3.png

enter image description here

Answer 3

你也可以指定孩子

.root div:first-child {
    padding-left:-10px;
}

Answer 4

不，你不能改变填充。但你可以尝试将该div向左移动10px以达到相同的效果。

尝试

.root:first-child {
    margin-left: -10px;
}

或

.root:first-child {
    left: -10px;
    position: relative; //you may need to add this
 }

Answer 5

好的，这是你可以做的：现在我假设所有的填充都不是内联的。我不完全确定这是否是你想要的。但这是我的两分钱。

http://jsfiddle.net/hYG9s/4/

<强> CSS

div.root > div:not(:first-child) {
    padding-left: 10px !important;
}    
div.root > div > div{
    padding-left: 10px;
}

CSS为第一个孩子保留填充：0px

5 个答案: