您的位置：首页 > 其它

ul 宽度不固定居中

2013-10-24 10:39 423 查看

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.demo05{
background-color: #000;
height:60px;
width: 40px;
-webkit-border-radius:20px/30px;
-moz-border-radius:20px/30px;
border-radius:20px/30px;

}
.mouse{ transform-origin:10px 0;border-top: transparent;border-bottom: transparent;border-right: #000;-ms-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);width: 0; height: 0; border-width:20px 10px 20px 0; border-style: solid; }

*{margin:0;padding:0;}

.wrap{font-size:0;list-style:none;display:block;text-align:center;}

/* hack for chrome */
li{font-size:13px;vertical-align:top;display:inline-block;*display:inline;*zoom:1;}

#test{margin-bottom:30px;}
#test li{text-align:left;width:130px;height:130px;padding:20px;background:#ffc;border:1px solid #f30;}
#test p{margin-bottom:10px;}
#test .button{display:block;width:60px;height:25px;line-height:25px;text-align:center;background:#f30;color:#fff;white-space:nowrap;}

.nav{border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:2px 0;margin-bottom:10px;background:#f7f7f7;}
.nav li{background:#333;padding:8px 10px;border:3px solid #fff;}
.nav a{color:#fff;text-decoration:none;}

</style>
</head>
<body>
<div class="demo05"></div>
<div class="mouse"></div>
<ul><li>woshili1</li><li>woshili1</li><li>woshili1</li><li>woshili1</li><li>woshili1</li><li>woshili1</li></ul>

<ul id="test" class="wrap">
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> <a class="button">button</a></li>
<li><p>sed do eiusmod tempor incididunt ut</p> <a class="button">button</a></li>
<li><p>fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p></p> <a class="button">button</a></li>
</ul>

<ul class="nav wrap">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>

<ul class="nav wrap">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>

<ul class="nav wrap">
<li><a href="#">item 1</a></li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航