css justify-content：元素之间的空间不在边缘

zbdgwd5y 于 2023-04-01 发布在其他

关注(0)|答案(4)|浏览(175)

我有一个问题，项目没有使用完整的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;
}

css

来源：https://stackoverflow.com/questions/32695102/justify-content-space-between-elements-are-not-at-the-edges

4条答案

按热度按时间

tvz2xvvm1#

padding: 0;和删除clear fix（我忽略了...）解决了它。
感谢所有人！

赞(0）回复(0）举报 2023-04-01

4zcjmb1e2#

您可以使用box-sizing属性到border-box来调整大小的计算方式。
为了方便使用，我将它添加到所有元素中，但为了优化，我强烈建议你只将它添加到你需要添加它的元素中。
至于你的宽度问题，也许删除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

展开查看全部

赞(0）回复(0）举报 2023-04-01

xv8emn3q3#

引导用户，请注意.container-fluid引入的::before和::after。
修复：

.container-fluid:before,
.container-fluid:after {
    content: none;
    display: none;
}

贷方：https://stackoverflow.com/a/48648382

赞(0）回复(0）举报 2023-04-01

jw5wzhpr4#

你应该在顶层设置margin和padding为零。ul元素带有默认的padding。只需将此添加到wrapper ul：

.wrapper ul {
 padding: 0;
...

或者更好的，开始你的css

*{
  margin:0;
  padding: 0;
}

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

赞(0）回复(0）举报 2023-04-01

我来回答

css justify-content：元素之间的空间不在边缘

4条答案

相关问题

热门标签

最新问答