<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>
CSS中display: inline-block;的使用
于 2024-04-06 20:59:21 首次发布