做水平导航怎么用float的问题

m354256175 · 发表于 2019-6-14 10:37:35

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

用float:left做的水平导航，窗口缩小时，导航选项位置也会移动，

不二如是 · 发表于 2019-6-14 14:59:57

想要固定标签位置？
鱼油上传代码，并详细说明需求，会更快获得帮助哦

m354256175 · 发表于 2019-6-14 18:42:48

这是代码，因为用了float：left，所以窗口尺寸变化是，导航的标签也会改变位置

<!DOCTYPE html>
<html>
<head>
<title>水平导航栏</title>
<meta charset="utf-8">
<style type="text/css">
.nav{
width:100%;
background:#5599FF;
text-align:center;
}

ul{
list-style-type:none;
margin:0;
padding:0;
display:inline-block;
}

li{
float:left;
}

a{
height:50px;
width:100px;
display:block;
text-decoration:none;
line-height:50px;
}
</style>
</head>
<body>
<div class="nav">
<ul id="nav_ul">
<li class="homepage"><a href="http://www.baokaodaxue.com/bkdx/index/index" target="_blank">首页</a></li>
<li class="zytb"><a href="#" target="_blank">志愿填报</a></li>
<li class="gktf"><a href="http://www.baokaodaxue.com/bkdx/vip/novip" target="_blank">高考提分</a></li>
<li class="zjydy"><a href="http://www.baokaodaxue.com/bkdx/zx/home" target="_blank">专家一对一</a></li>
<li class="gkq"><a href="#" target="_blank">高考圈</a></li>
<li class="xwzx"><a href="http://www.baokaodaxue.com/bkdx/news/list" target="_blank">新闻资讯</a></li>
<li class="hwzs"><a href="http://www.baokaodaxue.com/bkdx/overseas/search" target="_blank">海外招生</a></li>
</ul>
</div>
</body>
</html>

m354256175 · 发表于 2019-6-14 18:44:50

像鱼C论坛首页的导航栏，是不是用JS实现的，无论窗口尺寸怎么改都不会影响导航栏的位置

m354256175 · 发表于 2019-6-17 10:13:16

以解决，只要把块元素宽度设置为具体的px，而不是百分比，即可

账号		自动登录	找回密码
密码			立即注册