justify-content: space-元素之间不在边缘

Question

我有问题，项目没有使用完整 width。在 codepen 中，他们使用 space 比在我的原始代码中更好，但他们也没有使用完整的 width，我真的不知道为什么。

space-between 和 space-around 之间的差异很小，这是不应该的。（未在此代码笔中测试）

http://codepen.io/notyetnamed/pen/KdMqJV

HTML:

<div class="wrapper">
    <h2>Lorem Ipsum</h2>
    <ul class="cf">
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>
    </ul>
  </div>

<div class="wrapper">
    <h2>Lorem Ipsum</h2>
    <ul class="cf">
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>Lorem</h3>
        </a>
      </li>
    </ul>
  </div>

CSS:

.wrapper {
  margin: 0 auto;
  max-width: 1256px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  width: 100%;
  border: 1px solid black;
}
.wrapper ul {
  border: 1px solid red;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  &:before {
    content: " ";
    display: table;
  }

  &:after {
    content: " ";
    display: table;
    clear: both;
  }
}
.wrapper ul li {
  border: 1px solid green;
  max-width: 186px;
  width: 15.30%;
  list-style: none;
}

Answer 1

您可以使用 box-sizing 属性到 border-box 来调整尺寸的计算方式。

为了方便使用，我将它添加到所有元素中，但为了优化，我强烈建议您只将它添加到您需要添加的元素中。反正你应该对所有 CSS 做。

至于你的宽度问题，也许删除 width: 15.30%; 会解决这个问题，如下所示。

* {
  box-sizing: border-box;
}

.wrapper {
  margin: 0 auto;
  max-width: 1256px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  width: 100%;
  border: 1px solid black;
}
.wrapper ul {
  padding: 0;
  border: 1px solid red;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.wrapper ul li {
  border: 1px solid green;
  list-style: none;
}

<div class="wrapper">
    <h2>Lorem Ipsum</h2>
    <ul class="cf">
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>
      
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>
      
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>
    </ul>
  </div>

<div class="wrapper">
    <h2>Lorem Ipsum</h2>
    <ul class="cf">
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>
      
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>
      
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>
      
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>Lorem</h3>
        </a>
      </li>
    </ul>
  </div>

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

您应该首先在顶层将边距和填充设置为零。 ul 元素带有默认填充。只需将其添加到包装器 ul:

.wrapper ul {
 padding: 0;
...

甚至更好，从

开始你的 css

*{
  margin:0;
  padding: 0;
}

您将摆脱任何不需要的默认填充和边距。

Answer 3

padding: 0; 并删除 clear fix（我忽略了...）解决了它。

感谢大家！

justify-content: space-元素之间不在边缘

justify-content: space-between elements are not at the edges

html

css

flexbox