gpt4 book ai didi

html - 缩小时导航链接堆叠

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

所以我正在用 html 和 css 构建一个网站。我已经用链接制作了一个导航栏,但是当我缩小时,链接位于彼此下方而不是内联。如果有人可以给我一些指示,那就太好了。谢谢

<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">PRODUCTS</a></li>
<li><a href="">SHOPS</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">ABOUT US</a></li>
</ul>
</div>
<div class="main">

</div>
</div>
</body>
</html>


     body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}

.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}

.wrap {
width: 960px;
margin: auto;
}

.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;

}

ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}

ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}

ul li a {
text-decoration: none;
color: white;
font-family: arial;
}

ul li a:hover {

}

.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}

最佳答案

“链接位于彼此下方而不是内联”

要解决此问题,您需要将 float: left; 属性添加到您的 li 中,如下所示:

ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}

关于html - 缩小时导航链接堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25880229/

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