Question

我遇到问题，这些项目不使用完整的width。在codepen中，他们使用的空间比我原来的代码更好，但他们也没有使用完整的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：空格元素不在边缘

3 个答案: