为什么这个span标签要浮动后才能显示在div里？
来源：4-3 video-布局（3）
lcyjerry
2020-03-25 21:53:53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
list-style: none;
}
.videoBox{
width:540px;
height:332px;
background-color: #000;
box-shadow: 0 0 4px black;
}
.video{
float:left;
width:540px;
height:305px;
}
.control{
float:left;
width:540px;
height:27px;
background:url(images/ctrs_bg.gif)repeat-x;
}
.control .play{
width:13px;
height:15px;
margin-left:14px;
margin-top:6px;
background:url(images/playNode.png);
cursor:pointer;
float:left;
}
.control .load{
width:267px;
height:10px;
margin:9px 0 0 14px;
float:left;
background:url(images/load_bg.png)repeat-x;
position:relative;
}
.control .load .loadleft{
height:100%;
width:3px;
position: absolute;
left:0;
top:0;
background:url(images/left_bg.png)no-repeat;
}
.control .load .loadright{
height:100%;
width:3px;
position: absolute;
right:0;
top:0;
background:url(images/right_bg.png)no-repeat;
}
.control .load .controller{
width:17px;
height:17px;
background:url(images/crl_bg.png);
position:absolute;
left:-8.5px;
top:-3.5px;
cursor:pointer;
}
.control .timeNode{
float:left;
width:55px;
height:10px;
margin:9px 0 0 9px;
}
.control .timeNode span{
float:left;
color:#fff;
font-size:10px;
line-height:10px;
}
</style>
</head>
<body>
<div class="videoBox">
<!-- 视频 -->
<video class="video" src="data/imooc.mp4"></video>
<!-- 控制器 -->
<div class="control">
<div class="play"></div>
<div class="load">
<div class="loadleft"></div>
<div class="loadright"></div>
<div class="controller"></div>
</div>
<div class="timeNode">
<span class="now">1:30</span>
<span> - </span>
<span class="all">4:30</span>
</div>
</div>
</div>
</body>
</html>
为什么显示在那个timenode里的span标签的文字要浮动后才会显示在timenode里？
4回答
-
好帮手慕糖
2020-03-26
同学你好，video可以不设置浮动，这里的浮动没有作用。
另，建议：同学的遇到的问题，可以先梳理下，一起提问。便于更加快速的为你解答哦。
祝学习愉快~
0 -
好帮手慕糖
2020-03-26
同学你好，因为要在一行显示，div是块级元素，设置浮动让其在一行显示哦。
祝学习愉快~
0h020-03-26 -
好帮手慕糖
2020-03-26
同学你好，宽度修改之后，是可以在一行显示的，如下：
不过又点往下，是因为设置的上外边距导致的，去掉即可，例：
祝学习愉快~
0h020-03-26 -
好帮手慕糖
2020-03-26
同学你好，因为span是行内元素，行内元素彼此之间是有一个间距的，导致整体的宽度变大，div存放不下，换行显示了。可以将div元素的宽度设置大一点，也是可以存放下的。
设置浮动之后，会有块级元素的特性，这个间距就没有了，宽度够用就不换行了。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0h020-03-26
