换行时父 div 比其子文本宽答案

【问题标题】：Parent div is wider than its child text when the line breaks换行时父 div 比其子文本宽
【发布时间】：2017-04-05 09:50:27
【问题描述】：

所以，我认为我在 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;
}

如您所见，如果窗口不够宽，无法在一行中显示文本，则文本将换行，这很好，因为这正是我想要的。

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

我尝试过使用空白，但这似乎没有帮助。你们知道如何消除这个差距吗？

非常感谢。

【问题讨论】：

@Dez 谢谢，但我不明白，你能详细说明一下吗？ ul 填充如何影响 li 的空白？我尝试将 ul 填充设置为 0，但我得到了相同的行为。我不确定我明白你的意思。谢谢！
额外的填充是因为 lis 被拉伸以试图共享空间 - 有些被拉伸得比其他的更多，看起来你有不均匀的填充。这与 flex-basis 如何共享子弹性项目的空间有关。如果将其设置为 0，您将看到 justify 内容正常工作，但您的项目始终处于最小状态
@Pete 你是男人，将 flex-basis 设置为 0 解决了这个问题。非常感谢！

标签： html css flexbox whitespace

【解决方案1】：

这里的问题是，当文本中断时，较长的单词在左右两侧会有更多的空白（因为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>

【讨论】：

嗨，Nenad，非常感谢您抽出宝贵的时间。在发布此问题之前，我确实认为这是与文本中心相关的问题，但是即使您向 lis 提供 text-align:left ，也会发生同样的问题，只是空白位于右侧而不是在两侧：（
感谢 Nedad，但这打破了这个词，因此对于短标题来说不是很实用。我非常感谢您的努力，非常感谢，但是皮特的评论已经为我指明了正确的方向:)

【解决方案2】：

正如@Pete 指出的那样：

额外的内边距是因为 li 被拉伸以试图共享空间 - 有些被拉伸得比其他人更多，这使得您看起来像有不均匀的内边距。

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

如果您将其设置为 0，您将看到 justify 内容正常工作，但您的项目始终处于最小状态

非常感谢您的澄清，Pete。

【讨论】：