为什么CSS中给父级div设置float:right后给子级li设置float:left失效？

给页面写的导航栏，为什么 li 的浮动设置失效了呢？不能在一行显示

<div class="tab_list">
   <ul>
               <li><a href="#">热门a>|li>
    ul>
  <ul>
               <li><a href="#">家电a>|li>
    ul>
  <ul>
               <li><a href="#">***a>|li>
    ul>
  <ul>
               <li><a href="#">***a>|li>
    ul>
div>

```css
.tab_list {
    float: right;
    line-height: 30px;
}
.tab_list ul li{
    float: left;
}

运行结果：

img

最后解决了，非常小的问题，我的html结构是一个 ul 一个 li ，之后我改成一个 ul 里面包含全部的 li 就可以了！！！


```html
 <ul>
                        <li>
                            <a href="#">新奇特</a>|
                        </li>
                        <li>
                            <a href="#">高端电器
                            </a>
                        </li>
                    ......
                    </ul>

```

img