CSS中display: inline-block;的使用

<template>
	<scroll-view scroll-x="true" class="parentBox">
		<view v-for="i in 20" class="box">子元素{{i}}</view>
	</scroll-view>
</template>

<script>

</script>

<style lang="scss">
	.parentBox{
		width:90%;
		height: 200px;
		border:1px solid green;
		//用于控制如何处理元素内(子元素会产生大量空白)的空白字符;
		//normal会换行
		//nowrap不会换行
		white-space: nowrap; 
		
		.box{
			width:100px;
			height:100px;
			background:gray;
			// inline-block使元素具有inline元素和block元素的特点;
			// inline-block可以像inline元素与其周围的元素在同一行上显示(如果有足够的空间);
			// inline-block元素的宽度和高度、边距、填充可以设置,这与 inline 元素不同(inline不能设置这些),因为 inline 元素的宽度和高度由其内容决定。
			// inline-block元素可以包含块级元素。
			// display: inline-block; 的一个常见场景是多个元素并排显示,但又想为每个元素设置特定的宽度、高度和边距时。例如,你可以使用它来创建水平导航菜单,其中每个菜单项都是一个 inline-block 元素。
			display: inline-block;
			margin: 5px;
		}
	}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值