快捷导航
发新帖
返回列表
a标签是行标签为什么转成区块标签之后不是独立一行的?我做出来也是独立一行的,能帮我看看哪里的问题吗
源代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>zijitenglongindex</title>
<link href="style/webstyle.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="header">
        <a href="#" class="logo"><img src="images/logo.png" width="283" height="70" alt=""/></a>
       
        <div class="hdright">
                <div class="enshoucangqiyeyouxiang">
                        <a href="#">EN</a>&nbsp;|&nbsp;<a href="#">收藏本站</a>&nbsp;|&nbsp;<a href="#">企业邮箱</a>
                </div>
               
             <div class="tel">
                        <div class="tel">咨询电话 400-8888 8888</div>
                 </div>
        </div>
</div>
<!--导航条-->
<div class="nav">
   <ul class="wrap">
            <li><a href="index.html">首页</a></li>
        <li><a href="about.html">关于恒杰</a></li>
        <li><a href="news.html">产品中心</a></li>
        <li><a href="#">新闻资讯</a></li>
        <li><a href="#">视频中心</a></li>
        <li><a href="#">技术实力</a></li>
        <li><a href="#">服务中心</a></li>
        <li><a href="#">人力资源</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>
</body>
</html>


——————————————————————————————————————————————————————————
css
@charset "UTF-8";
* {padding:0;
        margin:0;}

.header {
        width: 1100px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
}


       
.header .logo {
        float: left;
        margin-top: 15px;
}
.header .hdright {
        float: right;
        text-align: right;
        margin-top: 30px;
}
.header .hdright .enshoucangqiyeyouxiang {
        color: #7A7A7A;
        font-size: 12px;
}
.hdright .enshoucangqiyeyouxiang a {
        color: #000000;
        text-decoration: none;
}
.header .hdright .tel {
        color: #B0B0B0;
        font-size: 14px;
        margin-top: 4px;
}

.nav {
        width: 100%;
        height: 60px;
        min-width: 1100px;
        border-top: 1px solid #C4C4C4;
        float: left;
}

.nav li{background-color: #E5FFFC;}
       
.nav li a{display: block;color:#3d3d3d; font-size:14px; line-height:60px; padding:0 34px;}


举报 使用道具
| 回复

共6个回复 最后回复于 2017-8-24 20:46

勤币 170   学币 0  
沙发
发表于 2017-8-24 17:46:15 | 只看该作者
饿。。。。。
.nav li{background-color: #E5FFFC;}少了一个左浮动,老师能再给我讲讲为什么区块左浮动之后就可以跑到一排去了吗
举报 使用道具
勤币 13901   学币 196  
板凳
发表于 2017-8-24 17:47:09 | 只看该作者
那你是要独立一行的还是不要独立一行?你指的是菜单栏的标签还是序列标签?
举报 使用道具
勤币 614   学币 0  
地板
发表于 2017-8-24 17:50:08 | 只看该作者
蛀牙 发表于 2017-8-24 17:46
饿。。。。。
.nav li{background-color: #E5FFFC;}少了一个左浮动,老师能再给我讲讲为什么区块左浮动之后 ...

浮动就像排队,li占多宽位置,后面还有没下一个li的位置,有就接着排队,没有就跳行。这样能懂不?
举报 使用道具
勤币 614   学币 0  
5#
发表于 2017-8-24 17:52:09 | 只看该作者
蛀牙 发表于 2017-8-24 17:46
饿。。。。。
.nav li{background-color: #E5FFFC;}少了一个左浮动,老师能再给我讲讲为什么区块左浮动之后 ...

是的,你少了个浮动,li本身是独立的一行的,里面的a怎么设置,li还会是独立的一行。所以有时候不能单只看那一个标签的属性,外面包围的标签也会影响到。
举报 使用道具
勤币 170   学币 0  
6#
发表于 2017-8-24 20:45:45 | 只看该作者
lori棒棒糖 发表于 2017-8-24 17:47
那你是要独立一行的还是不要独立一行?你指的是菜单栏的标签还是序列标签? ...

谢谢老师楼下已经帮解答了
举报 使用道具
勤币 170   学币 0  
7#
发表于 2017-8-24 20:46:38 | 只看该作者
yuanxi52028 发表于 2017-8-24 17:50
浮动就像排队,li占多宽位置,后面还有没下一个li的位置,有就接着排队,没有就跳行。这样能懂不? ...

好的谢谢
举报 使用道具
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表