我正在尝试使用 css 和 jQuery ui 复制此站点:http://www.carbonstudio.co.uk/
我想知道如何使用 CSS 定位 li 画廊元素，使其像示例中一样围绕放置区域形成一个圆圈？
我的 JS fiddle 如下:
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; }
最佳答案
一种方法是将这些 LI 放在 #trash div 中，并给每个 position: absolute。给 #trash div position: relative 并相对于 #trash div 的中心分别定位每个 LI。这是一个粗略的例子:
<!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>
关于jquery - CSS: position circles (li) 成一个圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16451581/