如何创建三个圆的水平线

使用HTML5和CSS3只，三个圆的水平行，每个坐在不同的图像的顶部，包含其他图像和一个文字。

我已经试过

我曾尝试通过刚刚的div内添加的div并指定高度和宽度创建这个，但是这并没有奏效。我觉得我过于复杂的东西很简单，或忘记了一些非常明显的东西。这样做的最简单方法是什么？

备注请放心！我一直在努力自学仅两个月。

的HTML

<div class="circlewrapper"> 
    <div class="sector" id="read"> 
     <img src="images/test1.jpg" class="image1" height="165" width="165" /> 
     <div class="round" id="reading"> 
     <img src="images/book.jpg" class="image2" height="20" width="20" /> 
     <p id="readread">Read</p> 
     </div> 
    </div> 
    <div class="sector" id="listen"> 
    <img src="images/test2.jpg" class="image1" height="165" width="165" /> 
    <div class="round" id="listening"> 
     <img src="images/book.jpg" class="image2" height="20" width="20" /> 
     <p id="listlist">Listen</p> 
    </div> 
    </div> 
    <div class="sector" id="watch"> 
    <img src="images/test3.jpg" class="image1" height="165" width="165" /> 
    <div class="round" id="watching"> 
     <img src="images/book.jpg" class="image2" height="20" width="20" /> 
     <p id="watchwatch">Watch</p> 
    </div> 
    </div> 
</div>

的CSS

.circlewrapper { 
    width: 800px; 
    height: 270px; 
    padding: 0px; 
    margin: 0px auto 0px auto;} 
.sector { 
    width: 250px; 
    height: 250px; 
    padding: 0px; 
    margin: 8px; 
    display: inline;} 
.round { 
    height: 165px; 
    width: 165px; 
    padding: 0px; 
    margin: 0px auto 0px auto; 
    background-color: blue; 
    border-radius: 165px; 
    -moz-border-radius: 165px; 
    -webkit-border-radius: 165px; 
    z-index: 10;} 
p { 
    text-align: center; 
    color: white;} 
.image1 { 
    margin: 0px auto 0px auto; 
    padding: 0px; 
    z-index: 5;} 
.image2 { 
    margin: 0px auto 0px auto; 
    padding: 0px;}

来源

2013-02-11 user2061277