论坛

标题: a标签是行标签为什么转成区块标签之后不是独立一行的？ [打印本页]

作者: 蛀牙 时间: 2017-8-24 15:04
标题: a标签是行标签为什么转成区块标签之后不是独立一行的？
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> | <a href="#">收藏本站</a> | <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;}

作者: 蛀牙 时间: 2017-8-24 17:46
饿。。。。。
.nav li{background-color: #E5FFFC;}少了一个左浮动，老师能再给我讲讲为什么区块左浮动之后就可以跑到一排去了吗

作者: lori棒棒糖 时间: 2017-8-24 17:47
那你是要独立一行的还是不要独立一行？你指的是菜单栏的标签还是序列标签？

作者: yuanxi52028 时间: 2017-8-24 17:50

蛀牙发表于 2017-8-24 17:46
饿。。。。。
.nav li{background-color: #E5FFFC;}少了一个左浮动，老师能再给我讲讲为什么区块左浮动之后 ...

浮动就像排队，li占多宽位置，后面还有没下一个li的位置，有就接着排队，没有就跳行。这样能懂不？

作者: yuanxi52028 时间: 2017-8-24 17:52

蛀牙发表于 2017-8-24 17:46
饿。。。。。
.nav li{background-color: #E5FFFC;}少了一个左浮动，老师能再给我讲讲为什么区块左浮动之后 ...

是的，你少了个浮动，li本身是独立的一行的，里面的a怎么设置,li还会是独立的一行。所以有时候不能单只看那一个标签的属性，外面包围的标签也会影响到。

作者: 蛀牙 时间: 2017-8-24 20:45

lori棒棒糖发表于 2017-8-24 17:47
那你是要独立一行的还是不要独立一行？你指的是菜单栏的标签还是序列标签？ ...

谢谢老师楼下已经帮解答了

作者: 蛀牙 时间: 2017-8-24 20:46

yuanxi52028 发表于 2017-8-24 17:50
浮动就像排队，li占多宽位置，后面还有没下一个li的位置，有就接着排队，没有就跳行。这样能懂不？ ...

好的谢谢

欢迎光临论坛 (http://bbs.qinxue.com/)