网页 导航栏 二级菜单中的文字呈竖排，如何避免，css 哪里出了问题，求指教，代码如下。
<styletype="text/css">nav{width:960px;margin:50px;border:1pxsolidblack;}.list1a{displ...
<style type="text/css">
nav{width:960px;margin:50px;border:1px solid black;}
.list1 a{display:block;color:#555;border=width:3px;border-color:transparent;padding:.2em 2em;}
.list1 *{margin:0;padding:0;}
.list1 ul{float:left;}
.list1 li{float:left;list-style-type:none;position:relative;margin:10px;}
.list1 li ul{display:block;position:absolute;left:0%;top:100%;}
.list1 li li{float:none;}
</style>
</HEAD>
<BODY>
<nav class="list1">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服务</a>
<ul>
<li><a href="#"> 装修</a></li>
<li><a href="#"> 施工</a></li>
<li><a href="#"> 设计</a></li>
<li><a href="#"> 水电</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
<li><a href="#">招贤纳士</a></li>
<li><a href="#">公司地址</a></li>
</ul>
</nav>
</BODY>
</HTML> 展开
nav{width:960px;margin:50px;border:1px solid black;}
.list1 a{display:block;color:#555;border=width:3px;border-color:transparent;padding:.2em 2em;}
.list1 *{margin:0;padding:0;}
.list1 ul{float:left;}
.list1 li{float:left;list-style-type:none;position:relative;margin:10px;}
.list1 li ul{display:block;position:absolute;left:0%;top:100%;}
.list1 li li{float:none;}
</style>
</HEAD>
<BODY>
<nav class="list1">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服务</a>
<ul>
<li><a href="#"> 装修</a></li>
<li><a href="#"> 施工</a></li>
<li><a href="#"> 设计</a></li>
<li><a href="#"> 水电</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
<li><a href="#">招贤纳士</a></li>
<li><a href="#">公司地址</a></li>
</ul>
</nav>
</BODY>
</HTML> 展开
展开全部
你的nav里面设置了padding:2em,2em，左右padding都是32px，而你的二级菜单li没有设置width，默认的宽度是最小的，设置一下width>80px，或者对于一级菜单二级菜单分别设置padding
追问
效果已经达到了 , 链接 a 6px + 左右padding 64px 共70px ,li的 80px是怎么 算出来的 ，还有为什么 一 级和二级菜单要 分别设置padding ， padding 是要 加给 ul 容器么？ 大小都是怎么算出来的呢，本人 初学者 有点 ，基础可能不太牢,请教了！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
展开全部
<style type="text/css">
nav{width:960px;margin:50px;border:1px solid black;}
.list1 a{display:block;color:#555;border=width:3px;border-color:transparent;padding:.2em 2em;}
.list1 *{margin:0;padding:0;}
.list1 ul{float:left;}
.list1 li{float:left;list-style-type:none;position:relative;margin:10px;}
.list1 li ul{display:block;position:absolute;left:0%;top:100%;width:100%;}
.list1 li ul li{float:left;}
</style>
这样就横着排了，其它的你再按你需要调整一下。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<HEAD>
<style type="text/css">
nav{width:960px;margin:50px;border:1px solid black;}
.list1 a{display:block;color:#555;border=width:3px;border-color:transparent;padding:.2em 2em; text-align:center}
.list1 *{margin:0;padding:0;}
.list1 ul{float:left;}
.list1 li{float:left;list-style-type:none;position:relative;margin:10px;}
.list1 li li{float:none;}
</style>
</HEAD>
<BODY>
<nav class="list1">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服务</a>
<ul>
<li><a href="#"> 装修</a></li>
<li><a href="#"> 施工</a></li>
<li><a href="#"> 设计</a></li>
<li><a href="#"> 水电</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
<li><a href="#">招贤纳士</a></li>
<li><a href="#">公司地址</a></li>
</ul>
</nav>
</BODY>
试一下, 这样就是横排的了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css后两行改为
.list1 li ul{display:block;position:absolute;left:0%;top:100%;width: 1000px;}
.list1 li ul li{float:left;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
