<分区>
标签 javascript css
<分区>
早上好，有没有解决方案可以完全按照这样的布局查看菜单？
我看到处理溢出问题已解决，但我需要菜单激活 overflow-x。
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function on(div){div.style.height="1000px"}
function off(div){div.style.height="auto"}
</script>
</head>
<body>
<div style="background:#99cc66;; height:500px; width:500px;overflow:hidden; ">
<div style="background:red; height:100px; width:500px;overflow-x:auto;overflow-y:hidden; ">
<div style="background:#666666; height:20px; width:750px; padding:10px;margin:10px; ">
<div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 1</div>
<div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 2</div>
<div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 3</div>
<div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 4</div>
<div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 5</div>
<div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 6</div>
<div onmouseover="on(this);" onmouseout="off(this);" style="background:#FFFFFF;display:inline-block; width:100px;border:1px solid #000000;">Menu 7</div>
</div>
</div>
</div>
</body>
</html>我希望通过保持菜单 overflow-x 得到这个结果
最佳答案
你可以在函数上添加position:absolute。 所以它将是:
function on(div){div.style.height="1000px"; div.style.position="absolute"};
position:absolute 从DOM中取出元素。
来自 w3cschool: 元素相对于其第一个定位的(非静态的)祖先元素定位
关于javascript - 从容器 : overflow problem 中展开菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52426915/
相关文章：
html - 设置 div 之后的 p 标签的样式(div 不是 p 的父级)
javascript - "position: fixed"与包含 svg 元素的 div 一起使用时会导致许多问题
javascript - 如何使用javascript模糊除一个元素之外的所有元素
javascript - 如何在 HOC 组件中获取 React 路由器方法？
javascript - MouseLeave触发 Electron 中的子元素
css - Prepros 应该在 Github.io 页面上将我的 SASS 编译成 CSS 吗？如果是这样，是什么导致我的 SASS 样式在 Github.io 页面上不起作用？