右上的下拉菜单的子菜单怎么左右两边对称 文本还靠左显示呢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕淘网</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<!-- 顶部 -->
<div class="top">
<div class="top-left">
<span>亲，请</span><a href="#" class="log">登录</a>
<a href="#" class="reg">免费注册</a>
<a href="#">手机逛慕淘</a>
</div>
<div class="top-right">
<div class="menu">
<p>我的慕淘<img src="images/icon/21.png"></p>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</div>
<div class="menu">
<p>收藏夹<img src="images/icon/21.png"></p>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</div>
<div class="menu no-select">
<p>商品分类</p>
</div>
<div class="menu">
<p>卖家中心<img src="images/icon/21.png"></p>
<ul>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体验中心</li>
</ul>
</div>
<div class="menu">
<p>联系客服<img src="images/icon/21.png"></p>
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</div>
</div>
</div>
<!-- logo区 -->
<!-- 导航区 -->
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/jquery.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/*头部*/
.header{
width: 100%;
height: 200px;
background-color: #f3f5f7;
}
/*顶部*/
.top{
width: 1000px;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #cdd0d4;
margin: 0 auto;
position: relative;
}
.top-left{
padding-left: 20px;
}
.top-left a{
text-decoration: none;
color: #4d555d;
margin-left: 10px;
}
.top-left span,
.top-left .log{
color: #f00;
margin-left: 0;
}
.top-left a:hover{
color: #f00;
}
.top-right{
position: absolute;
top: 0;
right: 20px;
color: #4d555d;
}
.menu{
float: left;
width: 100px;
cursor: pointer;
border: 1px solid transparent;
text-align: justify;
}
.no-select{
border: none;
}
.menu p img{
padding-left: 5px;
vertical-align: middle;
}
.menu ul li{
list-style-type: none;
line-height: 30px;
display: none;
}
.menu:hover{
color: #f00;
background-color: #fff;
border: 1px solid #cdd0d4;
border-top: none;
}
.no-select:hover{
border: none;
background-color: #f3f5f7;
}
.menu:hover ul li{
display: block;
cursor: pointer;
color: #4d555d;
}
.menu ul li:hover{
background-color: #cdd0d4;
}
用text-align: justify;为什么没有反应
正在回答
那就不能了，因为li的宽度改变了，不能是100%了，如果非要这样的话，你可以尝试给li内部在嵌套一个元素，来设置。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星