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

时间:2015-04-10 05:21:44

标签: html css padding border-box

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

2 个答案:

答案 0 :(得分:1)

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

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

&#13;
&#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;
&#13;
&#13;

希望这可以帮助你!!

答案 1 :(得分:1)

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

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