float属性在不设宽度的坑？

大家应该都知道float属性的作用。这里不做累述。
我现在要实现这样的效果，然后滚动，自右向左。

想要实现的效果

可以看到li的宽度是随内容撑开，不能把宽度设死，当然ul的宽度也就是随内容撑开，不能把宽度设死。
先上代码，看想要实现的效果，以及bug的效果。*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.main{
margin: 100px auto;
width: 820px;
height: 78px;
background: orangered;
overflow: hidden;
}
ul li{
float: left;
line-height: 66px;
font-size: 18px;
color: #142131;
font-weight: 400;
text-align: center;
padding: 0 12px;
border: 2px seagreen solid;
}

html 看完代码，相信大家都已经知道要实现的效果了吧。那好，我们现在看看最终呈现出来的效果。
效果 和你想的一样吗？这又是为什么呢？

估计有人会说用display:inline-block啊。我试了，效果还是一样，不信大家可以自行调试。

查阅W3C得知，float元素需要给他设定宽度 查阅W3C得知
ul不设置宽度时，他会继承父级的宽度，而不是随子元素内容撑开。但是现在我们又不能设置宽度。
那我们给ul设置宽度?这样是可行的，通过js获取到li的宽度，加起来就是了。但要是通过css实现呢？
给ul嵌套个父级，并且给他的宽度无限大，让ul滚动即可。 ul嵌套父级wrap
wrap的css
最终效果
以上。
好了，打完收工。
（注：前端开发，细碎繁杂。开这个专栏，仅仅是想把我平时工作学习中遇到的问题，给它记录下来，并没有做归纳梳理，所以不会那么详实连贯。大神大牛，请绕道。如果对你真有帮助，不吝赐我我一颗红心，或者赏我一颗糖吃，我也会满心笑纳，手动笑~~~）