使导航菜单在 html 和 css 中自动缩放到浏览器宽度

我正在尝试制作一个导航栏，根据打开的浏览器窗口的宽度判断，自动填充任何计算机的屏幕宽度。当此人重新缩放其浏览器时，我希望我的导航栏相应地重新缩放。我有三个菜单按钮组成了我的导航栏。我觉得一个值应该是 33.334% 左右，但我已经摆弄了一个小时，我无法让它工作。

#navMenu {
margin: 0 auto;
padding: 0;
width: auto;
text-align: center;
display: table;
width: 1436px;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
list-style-type: none;
display: table-cell;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #008000;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: 'TopSecret';
src: url('TopSecret.ttf');
url('TopSecret.ttf') format('truetype');
text-decoration: none;
height: 30px;
width: 476px;
display: block;
color: #FFF;
border: 1px solid #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #329932;
}   
#navMenu ul li:hover ul li a:hover {
background: #329932;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}

<body>
<div style="margin: 0 auto;">
<div id="navMenu">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="#>2018</a></li>
<li><a href="#">2017</a></li>
<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>
</ul>
</li>
<li><a href="tankreviews.html">Shop</a>
</li>
</ul>
<br class="clearFloat">
</div>
</div>
</body>

您可以使用flexbox来实现此目的：

#navMenu {
margin: 0 auto;
padding: 0;
width: auto;
text-align: center;
display: flex;
width: 100%;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
list-style-type: none;
width: 100%;
display: flex;
}
#navMenu ul li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
background: #008000;
flex: 1;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: 'TopSecret';
src: url('TopSecret.ttf');
url('TopSecret.ttf') format('truetype');
text-decoration: none;
height: 30px;
display: block;
color: #FFF;
border: 1px solid #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
display: flex;
flex-direction: column;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #329932;
}
#navMenu ul li:hover ul li a:hover {
background: #329932;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}

<div>
<div id="navMenu">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Gallery</a>
<ul>
<li>
<a href="#">2018</a>
</li>
<li>
<a href="#">2017</a>
</li>
<li>
<a href="#">2016</a>
</li>
<li>
<a href="#">2015</a>
</li>
</ul>
</li>
<li>
<a href="tankreviews.html ">Shop</a>
</li>
</ul>
<br class="clearFloat ">
</div>
</div>

这是你需要的吗？我已经更换了浮子并使用了弹性盒。

#navMenu {
width: 1436px;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
list-style-type: none;
display: flex;
justify-content: space-between;
}
#navMenu li {
background: #008000;
width: calc(100% / 3);
border: 1px solid #000;
text-align: center;
}
#navMenu ul li a {
font-weight: bold;
font-family: 'TopSecret';
text-decoration: none;
width: 100% display: block;
color: #FFF;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 40px;
display: flex;
flex-wrap: wrap;
}
#navMenu ul ul li {
width: 100%;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #329932;
}
#navMenu ul li:hover ul li a:hover {
background: #329932;
color: #000;
}
#navMenu a:hover {
color: #000
}

<div style="margin: 0 auto;">
<div id="navMenu">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="#">2018</a></li>
<li><a href="#">2017</a></li>
<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>
</ul>
</li>
<li><a href="tankreviews.html">Shop</a>
</li>
</ul>
</div>
</div>

希望这会有所帮助：

#navMenu {
margin: 0 auto;
padding: 0;
width: auto;
text-align: center;
display: table;
width: 100%;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
list-style-type: none;
display: table-cell;
width:100%
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #008000;
width: 33.3333%;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: 'TopSecret';
src: url('TopSecret.ttf');
url('TopSecret.ttf') format('truetype');
text-decoration: none;
height: 30px;
display: block;
color: #FFF;
border: 1px solid #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul ul li {
float: none;
right:0;
left:0;
width:100%
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #329932;
}   
#navMenu ul li:hover ul li a:hover {
background: #329932;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}

<body>
<div style="margin: 0 auto;">
<div id="navMenu">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="#>2018</a></li>
<li><a href="#">2017</a></li>
<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>
</ul>
</li>
<li><a href="tankreviews.html">Shop</a>
</li>
</ul>
<br class="clearFloat">
</div>
</div>
</body>

给你的NavMenu 一个相对大小，即 100%(如果你不希望它大于某个大小，你也可以使用最大宽度(，并将 33% 放在 #navMenu li 而不是 #navMenu ul li a 中(不要设置任何宽度，它会搞砸！

我还会在图库下拉链接中添加另一个类，以便您可以根据需要使用 100% 的宽度或固定大小单独设置它们的样式。

这是它的样子：

#navMenu {
margin: 0 auto;
padding: 0;
width: auto;
text-align: center;
display: table;
max-width: 1436px;
width: 100%;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
list-style-type: none;
display: table-cell;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #008000;
width: 33%;
}
#navMenu ul.drop li {
width: 100%;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: 'TopSecret';
src: url('TopSecret.ttf');
url('TopSecret.ttf') format('truetype');
text-decoration: none;
height: 30px;
display: block;
color: #FFF;
border: 1px solid #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #329932;
}   
#navMenu ul li:hover ul li a:hover {
background: #329932;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}

相关内容

最新更新

热门标签：