怎么改才能让文字横着排列
其中那一列文字怎样才能横着排
这是我的代码
<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="#"> 网评</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>
<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>
1.你将li变成了行内快，但ul也是块级元素，所以还是一个ul占一行，也就是说h1标签上面的都是一人一行。
2.想要让li里面的都排成一行的话有以下建议，在一个ul里面，放多个li，这多个li因为你设置了行内快所以会在一行显示。
3.或者在一个ul里面放多个小li，给ul设置display:flex。这是flex布局，你后面会学习到。
4.2.3方案都是改变你现在的结构，如果不想改变，你可以给你现在的ul加一个float :left就可以实现。
5.加油。
给包裹ul的div增加样式 display:flex就可以，
一般不这样写，都是一个ul里面多个li
题主的代码有一定的问题，我改动了一点，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</head>
<body>
<div class="NAV">
<ul>
<li>
<a href="#"> 网评</a>
</li>
<li>
<a href="#"> 视频</a>
</li>
<li>
<a href="#"> 原创</a>
</li>
<li>
<a href="#">经济</a>
</li>
<li>
<a href="#">政治</a>
</li>
<li>
<a href="#">文化</a>
</li>
<li>
<a href="#">社会</a>
</li>
<li>
<a href="#">党建</a>
</li>
<li>
<a href="#">科教</a>
</li>
<li>
<a href="#">生态</a>
</li>
<li>
<a href="#">国防</a>
</li>
<li>
<a href="#">国际</a>
</li>
<li>
<a href="#">网评</a>
</li>
<li>
<a href="#">图书</a>
</li>
<li>
<a href="#">+</a>
</li>
</ul>
</div>
<h1>
导航
</h1>
<div id="cat">
cat is so cute.
</div>
</body>
</html>
运行结果：
ul 标签下面本来就是用来放 li 标签的，为什么楼主要搞那么多 ul 标签哈！楼主有兴趣的话，可以去看看小编前端的专栏哈！
专栏链接为：https://blog.csdn.net/qq_45404396/category_10623475.html