导航栏中，li和a更应该给哪个标签浮动效果？

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

    * {
        margin: 0;

        padding: 0;

    }

    .box{
        width: 640px;

        height: 50px;

        /* background-color: blueviolet; */

        margin: 50px auto;

    }

    ul {
        list-style: none;

    }

    .box li a{
        float: left;                    

        width: 80px;                

        height: 50px;              

       background-color: pink;                         

       color: white;                     

        line-height: 50px;                

        font-size: 16px;             

        text-align: center;                

        text-decoration: none;        

                                                      

    }

    .box li a:hover{
        background-color: #008000;

    }

</style>

<div class="box">

    <ul>

   <li><a href="#">xw1</a></li>

   <li><a href="#">xw2</a></li>

   <li><a href="#">xw3</a></li>

   <li><a href="#">xw4</a></li>

   <li><a href="#">xw5</a></li>

   <li><a href="#">xw6</a></li>

   <li><a href="#">xw7</a></li>

   <li><a href="#">xw8</a></li>

</ul>

</div>

//我觉得应该给a标签加float:left效果：

    如果是给li标签加float:left的话，  css代码还需写 .box li{  float:left;}这样需要多写一行样式

    在a标签如果想进行设置宽高的话，需要先将a标签转化为块级标签才能设置宽高，但如果在a标签里写float:left的话，根据浮动的特点：浮动一行可以显示多个，并且可以设置宽高。这样写我认为可以省掉在a标签里写display:block这行代码。

    少写一行标签转换的代码，与最终所实现的效果是一样的。