问题描述:
开发环境:混合开发(vue + cordova)
兼容机型:华为部分机
写法(栗子):
<!--html-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
/*css*/
ul{
width:100%;
height: 30px;
overflow-x:scroll;
white-space: nowrap;
}
li{
float:left;
width:100px;
height:30px;
}
需求: 一行显示导航标题,X轴超出部分可拖动
问题: 华为部分手机(我们是内部CRM,所以暂时只兼容自己公司内部部分手机),浮动效果没用,其他机型好用。
解决方案:用flex重新布局
内部原理:本人还真不知道,请大神指教
个人总结:手机端(用手机自带浏览器的时候),对于固有的思维需要更新下了,我个人认为float很稳定了,但是没想到,还有这样的事情发生,所以,我感觉固有知识的更新真的很有必要