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

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

用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,而不是百分比,即可
页: [1]
查看完整版本: 做水平导航怎么用float的问题