Question

我刚刚练习制作一些mixins，目前这些是非常基本但只做一些简单的任务。

我已经制作了一个我可以调用的mixin，它将子元素转换为inline-block元素而不是浮点数，这样父元素就可以使用text-align来使元素居中，因为事物会相应缩小。

我遇到的问题是这个工作正常，但是自从调整它以后，它似乎没有像它那样工作。我将在下面提供一个工作示例。在我的例子中，每行设置3个，我每行只有两个。

我最初的想法是它可能是由inline-block创建的额外空间？虽然我vertical-align: top;要否定这一点。

HTML

<div id="site-wrap">
  <div class="list__wrap">
    <div class="list__item">1</div>
    <div class="list__item">2</div>
    <div class="list__item">3</div>
    <div class="list__item">4</div>
    <div class="list__item">5</div>
    <div class="list__item">6</div>
    <div class="list__item">7</div>
    <div class="list__item">7</div>
  </div>
</div>

SCSS

// The mighty Mixin... 
@mixin list-grid($per-row, $spacing, $child, $prefix){
    margin: 0 em(-$spacing/2);
    @include clearfix;

    //if a class
    @if $prefix == 'class' {

        > .#{$child}{
            width: 100%/$per-row;
            //position: relative;
            padding: 0 em($spacing/2) em($spacing) em($spacing/2);
            display: inline-block;
            vertical-align: top;
            background-clip: content-box;
        }

    }

    @if $prefix == 'id' {

        > ##{$child}{
            width: 100%/$per-row;
            position: relative;
            padding: 0 em($spacing/2) em($spacing) em($spacing/2);
            display: inline-block;
            vertical-align: top;
            background-clip: content-box;
        }

    }

    @if $prefix == 'none' {

        > #{$child}{
            width: 100%/$per-row;
            position: relative;
            padding: 0 em($spacing/2) em($spacing) em($spacing/2);
            display: inline-block;
            vertical-align: top;
            background-clip: content-box;
            word-wrap: break-word;
        }

    }
}

//start of our styles
#site-wrap{
  max-width: 1020px;
  margin: 0 auto;
  background: {
    color: Black;
  }  
}

.list__wrap{
  @include clearfix;
  // Call in our mixin on the inner divs
  @include list-grid(3, 10, list__item, class);
  // We can use text-align to center the list when it's shrinking down
  text-align: center;

  .list__item{
    background: {
      color: Tomato;
    }
  }
}

工作示例：http://codepen.io/vdecree/pen/wuExl

Answer 1

我认为我找到的解决方案并不像以某种方式格式化HTML那样狡猾。而是在父级上使用font-size: 0;（因为这打破了我的负边距） - 您可以使用letter-spacing: -0.31em;

// The mighty Mixin... 
@mixin list-grid($per-row, $spacing, $child, $prefix){
    margin: 0 em(-$spacing/2);
    @include clearfix;
    letter-spacing: -0.31em;

    //if a class
    @if $prefix == 'class' {

        > .#{$child}{
            width: 100%/$per-row;
            font-size: 16px;
            position: relative;
            padding: 0 em($spacing/2) em($spacing) em($spacing/2);
            display: inline-block;
            vertical-align: top;
            letter-spacing: 0;
            background-clip: content-box;
        }

    }

    @if $prefix == 'id' {

        > ##{$child}{
            width: 100%/$per-row;
            position: relative;
            padding: 0 em($spacing/2) em($spacing) em($spacing/2);
            display: inline-block;
            vertical-align: top;
            letter-spacing: 0;
            background-clip: content-box;
        }

    }

    @if $prefix == 'none' {

        > #{$child}{
            width: 100%/$per-row;
            position: relative;
            padding: 0 em($spacing/2) em($spacing) em($spacing/2);
            display: inline-block;
            vertical-align: top;
            background-clip: content-box;
            letter-spacing: 0;
            word-wrap: break-word;
        }

    }
}

Source

SCSS List grid mixin inline-block导致问题

1 个答案: