gpt4 book ai didi

jquery - 如何在不使用任何框架的情况下响应菜单栏

转载 作者:行者123 更新时间:2023-11-28 01:09:24 25 4
gpt4 key购买 nike

我正在尝试设计响应式菜单栏。这是我的 html 文件。

<body>
<div class="header">
<div class="container">
<div class="span_1_of_12">
<a href="#" class="logoImage"/></a>
</div>

<div class="span_11_of_12">
<nav class="navigation full-right">
<ul class="menubar">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
</div>
</div>
</div>

这是我的 CSS:

  .container{
width: 960px;
position: relative;
margin: auto;
}

.span_1_of_12 {
width: 7.416%;
margin: 1% 0 1% 0%;
float: left;
}

.span_11_of_12 {
width: 91.58%;
margin: 1% 0 1% 0%;
float: left;
}

当我尝试调整浏览器窗口大小时。菜单栏被剪切@窗口的右侧。我附上了截图。

我的假设是,当将窗口大小时调整为 800px 时,菜单栏不应在浏览器的右侧被截断。因为我在 %age 中提到了宽度。它应该适应可用空间。如果这是错误的假设。请建议我正确的方法。

enter image description here

最佳答案

只需将您的 .container 宽度设置为 100% 或 100vw(视口(viewport)宽度)。你不能有固定的像素宽度。

关于jquery - 如何在不使用任何框架的情况下响应菜单栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38350540/

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