Question

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

请忽略点击菜单无法正常工作的问题 - 问题是它们开始完全居中，但当您将页面大小缩小到某一点时，其中一个菜单跳到另一个下方，尽管事实上页面上还有足够的空间来容纳两者。

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

<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

div中的元素过早崩溃

1 个答案: