<div class="menu-second"> <ul> <li class="active"><a href="#">水环境</a></li> <li><a href="#">大气环境</a></li> <li><a href="#">自然生态</a></li> <li><a href="#">土壤环境</a></li> <li><a href="#">企业污染</a></li> <li><a href="#">气候变化</a></li> </ul> </div>
- 最初,为了实现上图效果,我的想法:
- 给 ul 设置了固定宽度 width: 600px,overflow: hidden
- 给 li 设置了固定宽度 width: 100px
这个想法不行,实际效果是:随着 li 的增多,li 被压缩了,没有出现滚动条
- 为了防止 li 被压缩,我给 li 设置了最小宽度:
- min-width:100px,强制 li 的最小宽度不会改变
新的问题:- .menu-second(ul 外层的 div) 含有 padding
- 如果给 li 设置了最小宽度,随着 li 的增多,li 不会变形了
- 但是 ul 也会被无线扩大,ul 的溢出隐藏失去作用,ul 外层的 div padding 自动失效,即使设置 ul 的 min-width 也没用
不建议给 ul 设置滚动条,也不建议给 .menu-second 设置滚动条(因为他有 padding,容易导致很多问题)
解决方案:- 在 ul 和 .menu-second 之间,单独添加一层 div,用于处理滚动条
<div class="menu-second"> <!-- 这个div只用于控制滚动条,需要设置溢出隐藏,以及滚动条 --> <div class="ul-scroll"> <ul> <li class="active"><a href="#">水环境</a></li> <li><a href="#">大气环境</a></li> <li><a href="#">自然生态</a></li> <li><a href="#">土壤环境</a></li> <li><a href="#">企业污染</a></li> <li><a href="#">气候变化</a></li> </ul> </div> </div> <style> .menu-second { width: 620px; height: 58px; /* padding 导致 .menu-second 不适合设置滚动条 */ padding: 0 10px; background: url(../img/map/menu-second-outer-box.png) no-repeat; } /* 仅用于设置滚动条作用的 div */ .ul-scroll { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; /* 为了滚动条不贴到底部 */ margin-top: 4px; overflow-y: hidden; overflow-x: auto; } /* ul 标签不适合添加滚动条 */ .menu-second ul { width: 100%; display: flex; } .menu-second ul li { /* li 需要设置最小宽度 */ min-width: 100px; height: 38px; } </style>
给 li 设置固定宽度,随着 li 的增多,宽度失效,li 被压缩变小
最新推荐文章于 2021-06-26 12:07:23 发布