如何在包裹的浮动左列表中只有内边距

Question

我想知道如何使用float：left包含<li>元素的包装列表。没有任何外边距，只有元素之间的边距。 Here是我不想要的例子，因为它在列表外部有边距，而我希望外部列表的边框触及内部列表项的边框。 Here是我想要的一个例子，但是我发现这个解决方案是hacky，因为它需要在<ul>之外使用第二个容器作为列表边框，如果你坚持边界在<ul>本身你会看到它仍然比列表项目高10px，我也更喜欢避免负边距，除非我真的需要使用它们。

似乎浮动被设计为将图片等元素拉到一边并允许文本流向它们的任何一侧，而不是作为制作水平包装列表的方法，因为不考虑浮动的子元素的自然行为确定高度时。因此我还想知道如果像这样的东西使用像flexbox这样的东西会更好。

Answer 1

你是对的，这是对浮动的基本滥用。 Flexbox是解决这个问题的一种方法，是的。