如何在以下情况下增加li之间的空间?

时间:2015-09-25 05:16:53

标签: css sass compass-sass

以下是我的scss

@import "susy";
$susy: (
  columns: 12,
  gutters: 0,
  math: fluid,
  output: float,
  gutter-position: inside
);

ul {
  list-style: none;
  width: 240px;
}

li {
  display: table-cell;
  position: relative;
  vertical-align: middle;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #019ed5;
  border: 1px solid #019ed5;
  background-color: white;
  cursor: pointer;
  text-align: center;
  @include span(3);
  &:nth-child(4n){
    @include span(3 at 10);
  }
}

li:hover {
  background: #019ed5;
  color: #fff;
}
span.detail{
  position: relative;
  top: 12px;
  left: 8px;
}
span.more {
  position: relative;
  float: right;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  font-size: 10px;
  line-height: 20px;
  color: white;
}

这是我的HTML

<ul>
  <li>
    <span class="more">25</span>
    <span class = "detail">Jan<br/>15</span>
  </li>
  <li>
    <span class="more-statement">15</span>
    <span class="detail">Feb<br/>15</span>
  </li>
  <li>
    <span class="more">13</span>
    <span class="detail">Mar<br/>15</span>
  </li>
  <li>
    <span class="more-statement">8</span>
    <span class="detail">Apr<br/>15</span>
  </li>
  <li>
    <span class="more">30</span>
    <span class="detail">May<br/>15 </span>
  </li>
  <li>
    <span class="more">6</span>
    <span class="detail">Jun<br/>15</span>
  </li>
  <li>
    <span class="more">9</span>
    <span class="detail">Jul<br/>15</span>
  </li>
  <li>
    <span class="more">16</span>
    <span class="detail">Aug<br/>1</span>
  </li>
  <li>
    <span class="more">0</span>
    <span class="detail">Sep<br/>15</span>
  </li>
  <li>
    <span class="more">15</span>
    <span class="detail">Oct<br/>15</span>
  </li>
  <li>
    <span class="more">30</span>
    <span class="detail">Nov<br/>15</span>
  </li>
  <li>
    <span class="more">21</span>
    <span class="detail">Dec<br/>15</span>
  </li>
</ul>
  

http://codepen.io/suhasdeshpande/pen/bVwZmz?editors=110

以上是我的代号,我对Sussy来说真的很新。很难在上面的代码中找出如何在lis之间添加空格。

0 个答案:

没有答案