gpt4 book ai didi

html - div 中的元素过早折叠

转载 作者:行者123 更新时间:2023-11-28 16:39:12 25 4
gpt4 key购买 nike

当页面大小调整到特定点以下时,我在强制 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%);
}

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

最佳答案

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

代替:

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

试试这个:

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

DEMO

关于html - div 中的元素过早折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33974033/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com