慕课网这导航案例怎么可以让他li以中间为标准，往两边填充的呀

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<title>CSS制作立体导航</title>
<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
<style>
body{
 background: #ebebeb;
}
.nav{
 width:560px;
 height: 50px;
 font:bold 0/50px Arial;
 text-align:center;
 margin:40px auto 0;
     background: #f65f57;
 /*制作圆*/

          /*制作导航立体风格*/
          
}
.nav a{
 display: inline-block;
 -webkit-transition: all 0.2s ease-in;
 -moz-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 -ms-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
.nav a:hover{
 -webkit-transform:rotate(10deg);
 -moz-transform:rotate(10deg);
 -o-transform:rotate(10deg);
 -ms-transform:rotate(10deg);
 transform:rotate(10deg);
}

.nav li{
 position:relative;
 display:inline-block;
 padding:0 16px;
 font-size: 13px;
 text-shadow:1px 2px 4px rgba(0,0,0,.5);
 list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/

        /*删除第一项和最后一项导航分隔线*/

.nav a,
.nav a:hover{
 color:#fff;
 text-decoration: none;
}

</style>
</head>
<body>
<ul>
     <li><a href="">Home</a></li>
     <li><a href="">About Me</a></li>
     <li><a href="">Portfolio</a></li>
     <li><a href="">Blog</a></li>
     <li><a href="">Resources</a></li>
     <li><a href="">Contact Me</a></li>
</ul>
</body>
</html>

我的意思是，放到浏览器中观察，删除li，其他子栏目往中间聚集，自己写一个，就不是这样自适应的。。。怎么实现的。

abc123456789def

浏览 1599回答 1

1回答

weibo_哆啦A梦有大口袋_0

.nav{ text-align:center;}.nav li{display:inline-block;}因为这两个属性第一个属性text-align:center;表示子元素(行内元素)居中显示li默认是display：block块级元素、display:inline-block;改为行内元素行内元素分两种,内联元素和内联块状元素内联元素 display:inline; 不可以设置宽高内联块级元素 display:inline-block; 可以设置宽高

1 0

随时随地看视频慕课网APP