问对齐六角形导航

EN

可能有很多方法可以实现这一点。我的解决方案可能是将六边形包装在一个相对定位的容器中，为所有六边形分配一个position: absolute，并使用“左”和“上”手动定位每个六边形。

我对代码进行了抽象，以便您更好地理解。http://codepen.io/nobitagit/pen/ojvue

ps -下次当你问问题的时候，你最好用jsfiddle.net或codepen来抽象你的问题，这样其他人可能会发现回答你更容易，问题+解决方案就在那里，供其他人在未来看到。

好吧，我刚在家里看了你的网站。

这在CSS中不是很容易做的事情，因为它不能很好地适应矩形或“块”，就像CSS使用的那样。

我有一些建议。也许它不会“回答”你的问题，但它会给你一个好的开始。

Div标签没有语义值，在这方面它们是“空的”。在本例中，您在一个无序列表<ul>中使用了大量的div标记来创建六边形的背景。这一切都很好，但我建议：

• 完全删除了div。无序列表确实不应该有div。这毕竟是一个“无序”列表。我要么专门使用div，要么更好：
• 使用一个无序列表，并创建每个六边形作为背景。其中一个盒子可容纳-> 1六边形。六边形不能缩放。没有理由为顶部/底部设置单独的div。

你不需要使用绝对定位。你只需要让这些六边形中的一些重叠即可。对于第二行六边形，您可以使用负边距来偏移并将它们放置在正确的位置。在角上使用.png实现透明效果！

伪解：

每一个六边形都采用square.

• Create六边形背景作为photoshop

• Hold中的<li>，并将它们浮动在<ul>中-->请勿使用

• 使用负上边距将第二行重叠到其他六边形的缝隙中。

祝好运。更新你的进度。我会进一步帮助你，但我不能给你一个解决方案。