商品搜索栏中的小问题，不知道如何解决。来自大一新生

问题遇到的现象和发生背景
问题相关代码，请勿粘贴截图
运行结果及报错内容

“”自营超市“”四个字不知道为什么会换行
每一个搜索文字之间的间隔太小

我的解答思路和尝试过的方法

```css
<div id="div7">
                    <ul>
                        <li style="color:#FC7C2A">首页</li>
                        <li style="color:#FC7C2A">自营超市</li>
                        <li>1号团</li>
                        <li>1号超市</li>
                        <li>女装</li>
                        <li>美妆</li>
                        <li>1号海购</li>
                        <li>团购</li>
                    </ul>
                </div>




#div7{
                float:left;
                width:550px;
                height:38px;
                border:1px red solid;
                line-height:36px;
            }
            #div7>ul{
                list-style: none;
                line-height:8px;
            }
            ul li{
                float: left;
                text-align: center;
                border:1px blue solid;
                text-decoration:none;
                text-align: center;
                width:50px;
                height: 20px;
            }



###### 我想要达到的结果

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/817276338936186.png "#left")

宽度不够

img