li下方存在间距空隙解决方案

li显示在边框顶部，而文字在下面为什么

在该vue项目下怎样将底部导航栏<footer>组件固定在底部，在不同设备打开时也不会位移，请提供修改后的完善代码：<template> <!-- 唯一根元素开始 --> <div class="container"> <!-- 顶部导航栏 --> <NavBar /> <!-- 中心大图展示区域 --> <section class="hero-section"> <img src="@/assets/recreation/fitness.png" alt="健身房内部场景" class="hero-image" > </section> <!-- 文字说明区域 --> <main class="content-section"> <section class="description"> <h2>活力健身房：城市上空的运动乌托邦</h2> <p>全景落地窗俯瞰草原与城市天际线，配备智能体测系统与专业训练器械，从有氧区到自由重量区私教课程结合蒙式体能训练法，让汗水挥洒成诗。恒温泳池与瑜伽室演绎健身快乐间奏曲，晨起泳姿划破朝阳，暮色中禅定瑜伽随音乐舒展，打造24小时不间断的健康生活场。</p> </section> <section class="rules"> <h3>蒙发国际温泉度假酒店多功能健身房设施使用守则</h3> <ul> <li>1、使用资格与时间</li> <p>-住店客人全天24小时刷卡进入，健身设施仅向住店客人开放。</p> <li>2、使用前准备</li> <p>-使用者需先熟悉各项设施使用说明，熟悉健身器材操作，有疑问可寻求工作人员帮助。</p> <li>3、场地使用规则</li> <p>-遵循先到先得原则，不设预订。</p> <p>-多功能活动室任何时间内最多允许十二名使用者同时在场。</p> <p>-室内不准饮食，需保持整洁。</p> <p>-须穿着合适运动服装及运动鞋，违反者校方有权拒绝其入场。</p> <li>4、健康与安全提示</li> <p>-患高血压、哮喘、心脏病或身体不适者，建议暂停使用。</p> <p>-运动前做10-15分钟热身，运动后做10分钟放松活动。</p> <p>-感到不适或痛楚，立刻停止运动并通知工作人员。</p> <p>-远离摆动中的健身设施或器材。</p> <li>5、器材使用规范</li> <p>-不能改动健身设施或器材原有位置。</p> <p>-有他人等待时，使用器材限时30分钟。</p> <p>-运动后将健身器材放回原处，用消毒剂喷雾擦拭。</p> <p>-操作前检查器材是否正常安全，发现故障/损坏，停止使用并通知酒店，勿自行维修。</p> <p>-损坏或遗失器材需赔偿。</p> <li>6、其他注意事项</li> <p>-未经同意，严禁在场内拍照、录影或录音。</p> <p>-酒店有权预留场地用于维修、清洁、训练班及活动安排。</p> <p>-酒店保留修改规则和规定的权利，恕不另行通知。</p> </ul> </section> </main> <!-- 底部导航栏 --> <Footer /> </div> <!-- 唯一根元素结束 --> </template> <script > import NavBar from '@/components/NavBar.vue'; export default { name: "ftness", data() { return { }; }, }; </script> <style > /* 健身区样式 */ .hero-section { position: relative; height: 60rem ; margin-top: 0rem; /* 补偿固定导航栏高度 */ overflow: hidden; } .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-title { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); color: white; font-size: 3rem; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); margin: 0; } /* 内容区样式 */ .content-section { max-width: 150rem; margin: 2rem auto; padding: 0 5%; line-height:2.4rem; } .description { margin-bottom: 3rem; padding: 2rem; background: #f8f9fa; border-radius: 1rem; font-size: 2.4rem; line-height: 4rem; margin: 6rem auto; font-family: "宋体"; } .rules { margin-top: 3rem; height: 100rem; padding: 2rem; background: white; border-radius: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); font-size: 2rem; line-height: 3.8rem; font-family: "宋体"; text-align: left; } .rules h3 { color: #007bff; border-bottom: 2px solid #007bff; padding-bottom: 0.5rem; margin-bottom: 1rem; font-size: 2.4rem; text-align: center; } @media (max-width: 768px) { .navbar { flex-direction: column; padding: 1rem 5% 0.5rem; } .nav-left, .nav-right { width: 100%; flex-wrap: wrap; justify-content: center; margin-bottom: 0.5rem; } .nav-item { margin: 0.5rem; } .hero-title { font-size: 2rem; } } </style>