CSS：位置圆（LI）成一个圆圈

我试图使用CSS和jQuery UI来复制这个网站：http://www.carbonstudio.co.uk/CSS：位置圆（LI）成一个圆圈

我想知道我怎么去使用CSS来定位Li画廊的项目，因此是像样本中的下落区域周围有一圈？

我JS提琴如下：

http://jsfiddle.net/elogicmedia/GG5EL/11/

有关名单画廊目前的CSS代码：

#gallery { float: left; width: 100%; min-height: 12em; } 
.gallery.custom-state-active { background: #eee; } 
.gallery li { 
float: left; width: 100px; height: 100px; margin: 0 0.4em 0.4em 0; text-align: center; cursor: move; 
-webkit-border-radius: 50px; 
-moz-border-radius: 50px; 
border-radius: 50px; 
} 
.gallery li h5 { margin: 0 0 0.4em; } 
.gallery li a { float: right; } 
.gallery li a.ui-icon-zoomin { float: left; } 
.gallery li img { width: 100%; cursor: move; }

来源

2013-05-08 sluggerdog

一种方法是放置#trash DIV中的LIS，并给每个position: absolute。给#trash div position: relative并单独放置每个LI相对于#trash div的中心。这里有个粗略的例子：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

#trash {position: relative; padding: 200px; display: table; vertical-align: middle; text-align: center;} 

.gallery {list-style: none; margin: 0; padding: 0;} 

.gallery li {position: absolute; border: 1px solid #aaa; width: 100px; height: 100px; text-align: center; cursor: move; border-radius: 50px;} 

.gallery li.one {top: 0; left: 50%; margin-left: -50px;} 
.gallery li.two {bottom: 0; left: 50%; margin-left: -50px;} 
.gallery li.three {right: 0; top: 50%; margin-top: -50px;} 
.gallery li.four {top: 25%; right: 25%; margin-top: -60px; margin-right: -60px;} 
.gallery li.five {bottom: 25%; right: 25%; margin-bottom: -60px; margin-right: -60px;} 
.gallery li.six {bottom: 25%; left: 25%; margin-bottom: -60px; margin-left: -60px;} 
.gallery li.seven {left: 0; top: 50%; margin-top: -50px;} 
.gallery li.eight {top: 25%; left: 25%; margin-top: -60px; margin-left: -60px;} 

</style> 

</head> 
<body> 


<div id="trash"> 
    <h4>Drop Here</h4> 

    <ul class="gallery"> 
     <li class="one"> 
     <h5>Mobile Billing Solutions</h5> 
     </li> 
     <li class="two"> 
     <h5>Mobile Advertising</h5> 
     </li> 
     <li class="three"> 
     <h5>Mobile Web</h5> 
     </li> 
     <li class="four"> 
     <h5>Mobile Database Acquisition</h5> 
     </li> 
     <li class="five"> 
     <h5>Loyalty</h5> 
     </li>  
     <li class="six"> 
     <h5>Creative Design</h5> 
     </li> 
     <li class="seven"> 
     <h5>Project Management</h5> 
     </li> 
     <li class="eight"> 
     <h5>Email Management</h5> 
     </li> 
     <!-- <li class=""> 
     <h5>TV Lead Generation </h5> 
     </li> --> 
    </ul> 

</div> 

</body> 
</html>

来源

2013-05-09 00:59:14

CSS：位置圆（LI）成一个圆圈

回答

相关问题