css设置 导航栏 右对齐 怎么做？
<!DOCTYPEhtml><html><head><metacharset="gb2312"/><title>纯CSS3实现UI设计网站导航-站长图库</title><...
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>纯CSS3实现UI设计网站导航 - 站长图库</title>
<style type="text/css">
.topnav {
text-align: center;
width:100%;
font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}
.topnav ul {
background: #efefef;
list-style: none;
position: relative;
display: inline-table;
}
.topnav ul li:hover > ul {
display: block;
}
.topnav ul li {
float:left;
display:inline;
}
.topnav ul li:hover {
background: #00CCFF;
}
.topnav ul li:hover a {
color: #fff;
}
.topnav ul li a {
display: block; padding: 25px 30px;
color: #757575; text-decoration: none;
}
.topnav ul ul {
background: #C0C0C0; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
display: none;
}
.topnav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
.topnav ul ul li a {
padding: 15px 40px;
color: #fff;
}
.topnav ul ul li a:hover {
background: #00CCFF;
}
</style>
</head>
<body>
<div>
<div class="topnav">
<ul style="width:100%;">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</div>
</body>
</html>
想做成下面这样的，谢谢了！ 展开
<html>
<head>
<meta charset="gb2312" />
<title>纯CSS3实现UI设计网站导航 - 站长图库</title>
<style type="text/css">
.topnav {
text-align: center;
width:100%;
font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}
.topnav ul {
background: #efefef;
list-style: none;
position: relative;
display: inline-table;
}
.topnav ul li:hover > ul {
display: block;
}
.topnav ul li {
float:left;
display:inline;
}
.topnav ul li:hover {
background: #00CCFF;
}
.topnav ul li:hover a {
color: #fff;
}
.topnav ul li a {
display: block; padding: 25px 30px;
color: #757575; text-decoration: none;
}
.topnav ul ul {
background: #C0C0C0; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
display: none;
}
.topnav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
.topnav ul ul li a {
padding: 15px 40px;
color: #fff;
}
.topnav ul ul li a:hover {
background: #00CCFF;
}
</style>
</head>
<body>
<div>
<div class="topnav">
<ul style="width:100%;">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</div>
</body>
</html>
想做成下面这样的，谢谢了！ 展开
4个回答
展开全部
.topnav ul{width:100%; text-align:right}
.topnav ul li{ display:inline-block}
.topnav ul li{ display:inline-block}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2023-01-13 · 百度认证:云南新华电脑职业培训学校官方账号
云南新华电脑学校
云南新华电脑学校是经云南省教育厅批准成立的省（部）级重点计算机专业学校，采用三元化管理模式，教学设备先进，师资雄厚学生毕业即就业，学院引进了电商企业入驻，创建心为电商创业园区，实现在校即创业
向TA提问
关注
![]()
展开全部
.topnav ul{width:100%; text-align:right} .topnav ul li{ display:inline-block}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
text-align: center;改成text-align: right;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
什么叫右对齐 能有 图？
更多追问追答
追问
想做成这样的
追答
ul 不要100%
ul float:right 就可以了
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
