<!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，其他子栏目往中间聚集，自己写一个，就不是这样自适应的。。。怎么实现的。
1 回答
已采纳
weibo_哆啦A梦有大口袋_0
TA贡献107条经验 获得超146个赞
.nav{
text-align:center;
}
.nav li{
display:inline-block;
}
因为这两个属性
第一个属性text-align:center;表示子元素(行内元素)居中显示
li默认是display：block块级元素、
display:inline-block;改为行内元素
行内元素分两种,内联元素和内联块状元素
内联元素 display:inline; 不可以设置宽高
内联块级元素 display:inline-block; 可以设置宽高
添加回答
举报
0/150
提交
取消