Question

我在每个项目之间设置了填充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个项目是兄弟姐妹

Answer 1

尝试将.pad的值更改为2.5px并将其按预期工作

修改：为padding添加了.white.box，现在所有方面都有一致的填充

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

希望这可以帮助你!!

Answer 2

为什么不能只使用nth-child CSS选择器？除第一个元素之外的所有内容都为padding-right 5px，并且第一个元素也为padding-left提供5px。最简单的解决方案，不是吗？

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

CSS：有没有办法在兄弟项目之间获得相同的填充

2 个答案: