1

我在每个项目之间设置了 5px 的填充，但是 5px + 5px 在兄弟项目之间变为 10px（水平，垂直也有 10px）

http://plnkr.co/edit/7FKBiTocHrTuwnpEqQsu?p=preview

// Code goes here

angular.module('app', [])
   .controller('MainCtrl', function($scope){
     $scope.items = Array(10);
   })
/* Styles go here */

*, :after, :before {
  box-sizing: border-box;
}

.one.fifth {
  width: 20%;
}
.one.whole{
  width: 100%;
}
.pad {
  padding: 5px;
}
.red {
  color: red;
}
.box {
  float: left;
  position: relative;
}
.red.box {
  background-color: red;
}
.white.box {
  background-color: white;
}
.black.border {
  border: 1px solid #000;
}
.center {
  text-align: center;
}
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
  </head>

  <body class="one whole">
    <div ng-controller="MainCtrl">
      <div class="red box pad center">
        <div class="white box">
          <div class="one fifth box pad" ng-repeat="item in items track by $index">
            <div class="one whole black border box">TEST {{$index}}</div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

有什么方法可以在所有内容之间获得 5px 精确的填充或间距？

注意：我尝试过 + 运算符，但是对第六项有副作用，因为这 10 项是同级的

4

2 回答 2

3

为什么不能只使用nth-childCSS 选择器？给除第一个元素 a padding-rightof之外的所有内容5px，并且对于第一个元素也给它 a padding-leftof 5px。最简单的解决方案，不是吗？

链接到文档：http ://www.w3schools.com/cssref/sel_nth-child.asp

于 2015-04-10T05:32:39.837 回答
1

尝试更改 to 的值.pad及其2.5px按预期工作

编辑：添加padding，.white.box现在所有边都有一致的填充

// Code goes here

angular.module('app', [])
   .controller('MainCtrl', function($scope){
     $scope.items = Array(10);
   })
/* Styles go here */

*, :after, :before {
  box-sizing: border-box;
}

.one.fifth {
  width: 20%;
}
.one.whole{
  width: 100%;
}
.pad {
  padding: 2.5px; / * changed this value to 2.5px and its working */
}
.red {
  color: red;
}
.box {
  float: left;
  position: relative;
}
.red.box {
  background-color: red;
}
.white.box {
  background-color: white;
 padding:3px 2px 2px 2px;
}
.black.border {
  border: 1px solid #000;
}
.center {
  text-align: center;
}
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>

  <body class="one whole">
    <div ng-controller="MainCtrl">
      <div class="red box pad center">
        <div class="white box">
          <div class="one fifth box pad" ng-repeat="item in items track by $index">
            <div class="one whole black border box">TEST {{$index}}</div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

希望这可以帮助你！

于 2015-04-10T05:29:47.587 回答