这里为什么使用了inline-block
来源：2-3 首页-头部样式（2）
慕勒2048820
2019-06-11 19:59:50
.search-bar .location-text {
position: relative;
/*为什么使用inline-block*/
display: inline-block;
font-size: 0.373333rem;
color: #fff;
vertical-align: 0.35rem;
margin-left: -0.08rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>首页</title>
<script>
var docEl = document.documentElement;
setRemUnit();
window.addEventListener('resize', setRemUnit);
function setRemUnit() {
var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
var radio = 10;
docEl.style.fontSize = viewWidth/radio + 'px';
}
</script>
<link rel="stylesheet" href="../lib/reset.css">
<link rel="stylesheet" href="./header/header.css">
<link rel="stylesheet" href="./header/searchbar.css">
</head>
<body>
<!-- header开始 -->
<div class="header">
<div class="search-bar">
<div class="bar-location">
<div class="location-icon"></div>
<div class="location-text">郑州市</div>
</div>
<div class="search-btn">
<p class="place-holder">鸡翅</p>
</div>
</div>
<img class="header-img" src="http://xs01.meituan.net/waimai_i/img/bannertemp.e8a6fa63.jpg">
</div>
<!-- header结束 -->
</body>
</html>写回答
2回答
-
好帮手慕慕子
2019-06-12
同学你好， 这里使用display: inline-block;是为了让两个块级元素在一行显示.
因为块级元素的display属性默认就是block; 所以这里不可以使用block哦
如下图所示， 老师是给图标和文字所属div都设置了inline-block; 让这两个在一行显示。
效果图：
同学可以结合示例， 再回顾一下视频， 加深理解哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0 -
慕勒2048820
提问者
2019-06-11
好处是什么，感觉block也可以啊
0
相似问题