html - div 中的元素过早折叠

Question

当页面大小调整到特定点以下时，我在强制 div 中的 2 个 SVG 菜单元素保持并排时遇到问题。这是一个例子...

http://codepen.io/d3wannabe/pen/JYgjbZ

请忽略单击菜单无法正常工作的事实 - 问题是它们开始时完全居中，但是当您将页面大小缩小到超过某个点时，其中一个菜单会跳到另一个菜单下面，尽管页面上明显留有足够的空间，可以让两者都出现在顶行。

我使用的基本结构是...

<div style="position: absolute; left: 50%; top: -10px;">
  <nav id="menu" class="menu">
    ...
  </nav>
  <nav id="menu2" class="menu">
    ...
  </nav>
</div>  

其中菜单类定义如下...

.menu {
    position: relative;
    display: inline-block;
    text-align: center;
    -webkit-transform: translate(-100%, 0%);
    -ms-transform: translate(-100%, 0%);
    transform: translate(-100%, 0%);
}

但我看不到任何内容似乎可以解释这种行为。任何想法将不胜感激，即使它只是解决此行为的更好方法 - 谢谢!

Answer 1

您只是缺少容器上的 width: 100%。

代替:

<div style="position: absolute; left: 50%; top: -10px;">

试试这个:

<div style="position: absolute; left: 50%; top: -10px; width: 100%;">

DEMO