HTML中导航条文字怎样弄成横排显示？
我的显示效果怎么成了竖着写的，我已经浮动了呀，望大神赐教！代码及图奉上！<head><metahttp-equiv="Content-Type"content="text...
我的显示效果怎么成了竖着写的，我已经浮动了呀，望大神赐教！
代码及图奉上！
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>#cs{ background-image:url(admin.png); width:1003px; height:78px;}li{ list-style:none; margin-top:0px; text-align:left; float:left; width:30px; }</style></head><body><center><div id="cs"><div class="ul"><ul><li>首页</li><li>家用电器</li><li>手机数码</li><li>日用百货</li><li>书籍</li><li>帮助中心</li><li>免费开店</li><li>全球咨询</li></ul></div></center></body></html> 展开
代码及图奉上！
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>#cs{ background-image:url(admin.png); width:1003px; height:78px;}li{ list-style:none; margin-top:0px; text-align:left; float:left; width:30px; }</style></head><body><center><div id="cs"><div class="ul"><ul><li>首页</li><li>家用电器</li><li>手机数码</li><li>日用百货</li><li>书籍</li><li>帮助中心</li><li>免费开店</li><li>全球咨询</li></ul></div></center></body></html> 展开
3个回答
展开全部
你之所以出现这个问题，原因在于
li{
list-style:none;
margin-top:0px;
text-align:left;
float:left;
width:30px; /* 这句限定了列表每列的宽度，宽度太小，所以文字变成竖写。去掉，或者改足够大 */
}我把你的代码重新改了一下，可以稍微好一点。
无标题文档.html 文件代码如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8" > /* 这行可以写得这样省略 */
<title>ul列表</title>
<link href="li.css" rel="stylesheet"> /* 使用外链CSS更好 */
</head>
<body>
/* <center/>标签去掉，这个标签是个淘汰的标签，可以用CSS控制 */
<div id="cs">
<div class="ul">
<ul>
<li>首页</li><li>家用电器</li><li>手机数码</li><li>日用百货</li><li>书籍</li><li>帮助中心</li><li>免费开店</li><li>全球咨询</li> /* li的代码全部连起来，可以让li之间没有一个默认的空格 */
</ul>
</div>
</div>
</body>
</html>
li.css 文件代码如下：
#cs {
background-image:url(admin.png);
width:1003px;
height:78px;
}
ul {
text-align: left; /* 对ul使用左对齐 */
padding: 0.15em 0 1px 0;
}
li {
display: inline; /* 直接用内联行显示，不用float，float不好控制 */
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
展开全部
不用给li加width，直接加个 padding: 0 10px;多好！这样即使菜单字数不一样也能很好的显示~
此外，使用line-height可以是字在图片垂直方向居中
此外，使用line-height可以是字在图片垂直方向居中
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
li{
list-style:none;
margin-top:0px;
text-align:left;
float:left;
width:30px;
}
中改为width:80px;
list-style:none;
margin-top:0px;
text-align:left;
float:left;
width:30px;
}
中改为width:80px;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
