求助网页导航条里的超链接文字不是横排

仲冬廿七 2020-06-18 06:11:44

HTml:<body>
<div class="nav">
<div class="public-width">
<div class="nav-logo">
<img src="img/logo.png" alt="">
</div>
<div class="nav-list">
<ul>
<li>
<a href="">首页</a>
</li>
</ul>
<ul>
<li>
<a href="">页2</a>
</li>
</ul>
<ul>
<li>
<a href="">页3</a>
</li>
</ul>
<ul>
<li>
<a href="">页4</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS:*{
margin: 0;
padding: 0;
}
body{
font-size: 16px;
color: #333;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width: 100%;
height: 80px;
box-shadow: 2px 3px 5px #ccc;
}
.public-width{
width: 1200px;
margin: auto;
}
.nav.public-width{
display: flex;
height: 80px;
justify-content: start;
align-items: center;
}
.nav-logo{
width: auto;
height: 60px;
}
.nav-logo img{
display: block;
width: auto;
height: 100%;
}
.nav-list {
margin-left: 30px;
height: 100%;
}
.nav-list ul{
display: flex;
height: 100%;
justify-content: start;

}
.nav-list ul li{
width: auto;
padding: 0 10px;
}
.nav-list ul li a{
color: #333;
}
是哪个环节出问题了
...全文
209 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
仲冬廿七 2020-06-20
  • 打赏
  • 举报
回复
感谢老哥们的回答不过已经解决了
前端韭菜 2020-06-19
  • 打赏
  • 举报
回复
引用 1 楼 風灬雲 的回复:
一个ul 就解决的问题 你要用那么多,这不就画蛇添足了 改成一个 ul就好了
按照楼上所说的用一个ul ,ul的样式设置display:flex或者li设置float。 或者按照你这种写法在nav-list的样式设置display:flex;
風灬雲 2020-06-19
  • 打赏
  • 举报
回复
一个ul 就解决的问题 你要用那么多,这不就画蛇添足了 改成一个 ul就好了

61,112

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧