当换行符时，父div比其子文本宽

Question

所以，我认为我对CSS非常好，直到我失去了整整一天试图弄清楚这么小的（对很多人来说很明显）问题。

这是一个大致显示我的结构的小提琴：https://jsfiddle.net/dbcxv7pg/

HTML

<ul class="tabs">

    <li class="tab-link"><span>Digital Strategy</span></li>
    <li class="tab-link"><span>Content Marketing</span></li>
    <li class="tab-link"><span>E-Mail Marketing</span></li>
    <li class="tab-link"><span>Social Media</span></li>
    <li class="tab-link"><span>Paid Search</span></li>
    <li class="tab-link"><span>Paid Social</span></li>
    <li class="tab-link"><span>SEO</span></li>
    <li class="tab-link"><span>Analysis &amp; Reporting</span></li>
    <li class="tab-link"><span>Community Management</span></li>
    <li class="tab-link"><span>Influencer Marketing</span></li>
    <li class="tab-link"><span>UX</span></li>

</ul>

CSS

ul.tabs {
    display:flex;
    list-style: none;
    border-top: 2px solid;
    border-bottom: 2px solid;
    padding: 6px;
    justify-content: space-between;
}
ul.tabs li {
    text-align:center;
}

正如您所看到的，如果窗口宽度不足以在一行上显示文本，则文本将分成一个新行，这很好，因为这就是我想要的。

但是一旦文本中断，一些文本元素的右侧和左侧会出现一些奇怪的空白区域，导致项目之间的间距不均匀：

我尝试过使用白色空间，但这似乎没什么帮助。 你们有任何关于如何消除这种差距的线索吗？

非常感谢。

Answer 1

这里的问题只是当文本中断时，较长的单词在左侧和右侧会有更多的空白区域（因为text-align: center），直到它们再次返回到一行。这就是在您的代码中li之间创建不均匀的间距。

＆＃13;

＆＃13;

.flex {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.a, .b {
  border: 1px solid black;
  text-align: center;
}

＆＃13;

<div class="flex">
  <div class="a">Aasdfasdfasdfsdfasdfsasdf sdfdasdfssdfsdf</div>
  <div class="b">Bsdfsdf sdf</div>
</div>

＆＃13;

＆＃13;

＆＃13;

消除这种差距的一个解决方案是设置word-break: break-all

＆＃13;

＆＃13;

.flex {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.a, .b {
  border: 1px solid black;
  text-align: center;
  word-break: break-all;
}

＆＃13;

<div class="flex">
  <div class="a">Aasdfasdfasdfsdfasdfsasdf sdfdasdfssdfsdf</div>
  <div class="b">Bsdfsdf sdf</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如@Pete所指出的那样：

  

额外的填充是因为 li 正在被拉伸以试图共享空间 - 有些被拉伸得比其他人更多，使得它看起来像是有不均匀的填充。

     

这与flex-basis如何分享子弹性项目的空间有关。

     

如果您将其设置为0，您会看到合理的内容正常工作，但您的项目始终是最小的

非常感谢claryfing，Pete。