el-collapse中title两端对齐

最新推荐文章于 2024-10-16 20:38:40 发布

原创最新推荐文章于 2024-10-16 20:38:40 发布 · 522 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端

el-collapse中title两端对齐

最后效果

<el-collapse>
			<el-collapse-item title="" name="1">
		<template slot="title">
			<div class="tablis">
				<div>04-02-18</div>
				<div>XXXXXXX</div>
				<div>AAAAAA</div>
			</div>
		</template>
		<div class="tablis_item">
			<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
			<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
		</div>
	</el-collapse-item>
	<el-collapse-item title="反馈 Feedback2222222222222dddd" name="2">
		<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
		<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
	</el-collapse-item>
</el-collapse>

.tablis {
        display: flex;
        justify-content: space-between;
        width: -webkit-fill-available;
    }
    .tablis_item {
        background-color: #f9fafc !important;
    }

.el-collapse-item__header {
    justify-content: space-between;
}

.el-collapse-item__arrow {
    margin-left: 0;
}

最主要的是必须加上width: -webkit-fill-available;