怎么改才能让文字横着排列

Question

其中那一列文字怎样才能横着排
这是我的代码

<title>求是网导航栏</title>
<style type="text/css">
   
     /*{
        margin:0;
        padding:0;
    }*/
    div.topLINE {
        background: red;
        height: 10px;
        width: 100%;
    }
    div.topPICTURE {
        width: 100%;
        height: 100px;
        background: blueviolet;
    }
    div.NAV {
        background-color: tomato;
        height: 50px;
        width: 100%;

    }
    div.NAV ul li {
        list-style-type:none;
        display:inline-table;
    }

    div.NAV  ul li a {
        text-decoration: none;
        text-align: center;
        display: inline-table;
        color: white;

    }
    h1 {
        background: yellowgreen;
        font-family: 楷体;
        font-size:100px;
        color: brown;
    }
    #cat {
        background: grey;
        width: 100%;
        height: 100px;
        font-size: x-large;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
   

    
    



</style>

    <ul>
        <li>
            <a href="#">&nbsp;网评</a>
        </li>
    </ul>
    <ul>
        <li>
            <a href="#">&nbsp;视频</a>
           
            
        </li>
    </ul>
    <ul>
        <li>
            <a href="#">&nbsp;原创</a>
        </li>
    </ul>
    <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>
    <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>
    <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>
<h1>
    导航
</h1>
<div id="cat">
    cat is so cute.
</div>

谢谢各位了

Answer 1

1.你将li变成了行内快，但ul也是块级元素，所以还是一个ul占一行，也就是说h1标签上面的都是一人一行。
2.想要让li里面的都排成一行的话有以下建议，在一个ul里面，放多个li，这多个li因为你设置了行内快所以会在一行显示。
3.或者在一个ul里面放多个小li，给ul设置display:flex。这是flex布局，你后面会学习到。
4.2.3方案都是改变你现在的结构，如果不想改变，你可以给你现在的ul加一个float :left就可以实现。
5.加油。