像 "padding box" 修改 DIV，其内容的不同 100% 值？

Question

我正在尝试为 div 中的内容实现一些缩进。我想让里面的所有元素都具有 100% 的宽度，但第一个元素必须远离左侧。这个演示展示了我真正需要的东西：

我试图在父级 div 的 ::before 伪元素之前搞乱，不同的定位和浮动但没有运气。有没有办法在 CSS 或 jQuery 中实现这一点？

Answer 1

使用 :nth-child pseudo class to select the items you want and then just give them a margin.

div{
    border:1px solid #000;
    padding:5px 10px;
}
p{
  background:#000;
  font-family:arial;
  color:#fff;
  margin:5px 0;
  padding:5px;
}
p:nth-child(-n+2){
  margin:5px 0 5px 50px;
}

<div>
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
    <p>Fourth</p>
</div>

顺便说一句，浮动项目并给它们 100% width 有点多余，所以我从我的代码中省略了它。

Answer 2

您不需要将 width:100% 添加到您的元素中。如果它们是块元素，它将自动占据容器宽度的 100%。然后只需使用 margin 到您需要的任何元素： HTML:

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

CSS:

body {margin:0; padding:0;}
.container {
    width:400px;
    padding:20px;
    background-color:#ddd;
}
.content {
    height:60px;
    background-color:green;
    margin-bottom:10px;
    position:relative;
}
.margin {
    margin-left:150px;
}

FIDDLE

像 "padding box" 修改 DIV，其内容的不同 100% 值？

Something like "padding box" to modify DIV, different 100% values of its content?

css

padding

indentation

box