换行时父 div 比其子文本宽

Question

所以，我认为我在 CSS 方面相当不错，直到我花了一整天的时间试图找出这样一个小问题（对你们中的许多人来说可能是显而易见的）。

这里有一个fiddle来大致展示我的结构：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;
}

如您所见，如果 window 的宽度不足以在一行中显示文本，文本将换行，这很好，因为这就是我想要的。

但是一旦文字断了，一些文字元素的左右两边会出现一些奇怪的空白space，导致项目之间的间距不均匀：

我试过玩 white-space 但这似乎没有帮助。你们知道如何消除这个差距吗？

非常感谢。

Answer 1

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

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

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

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

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

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

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

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

Answer 2

正如@Pete 指出的那样：

The extra padding is because the lis are being stretched to try to share the space - and some are being stretched more than others making it look like you have uneven padding.

It's something to do with how flex-basis shares out the space of the child flex items.

If you set it to 0, you will see justify content works properly but then your items are always at their smallest

非常感谢你的澄清，Pete。

换行时父 div 比其子文本宽

Parent div is wider than its child text when the line breaks

html

css

whitespace

flexbox