css - 如何使用 flexbox 对齐一行中的元素？

Question

我正在尝试使用 flexbox、padding 和 justify-content 连续对齐 5 个元素，但我总是在元素之间留出空格。

如何将它们连续居中并将填充扩展到可用房间？

请参阅https://www.akropolis-ravensburg.de/ （这不是广告！）并向下滚动到“ Speisekarte ”。

根据您的观点，您会在标题元素“ Vorpseisen、Hauptgerichte、Dessert、Mittagskarte、Getränke ”之间看到一些空格。

感谢您的提示，帮助和任何其他。/ 亚历克斯

标签： cssflexbox

Answer 1

添加以下样式规则：

nav#nav_speisekarte ul#nav_speisekarte_list li { flex-grow: 1; }
nav#nav_speisekarte ul#nav_speisekarte_list li a { display: block; }

添加到a -tags 的 display-inline 导致它们之间有空格。对于这种类型的显示器来说，这是很常见的事情。需要父li标签上的 flex 增长才能让它们全部增长并填充空间:)