CSS：如何产生圆盒装列表

Question

我想重现最简单的方法如下（可能使用<ul>）：

所以，我希望能够尽可能多的行添加为我想要这个清单，每一行都是由图片，描述和计数器组成的。 该列表应该位于一个圆角框中，并且行应该用行分隔。

有人可以用CSS技巧帮助我吗？

非常感谢！

Answer 1

嘛，here's one way of doing it。

HTML：

<ul> 
    <li> 
     <img src="http://www.placekitten.com/16/16"> 
     Item 1 
     <span>1</span> 
    </li> 

    <!-- More list items --> 
</ul> 

CSS：

/* Container with border and rounded corners */ 
ul { 
    border: 1px solid #ccc; 
    width: 200px; 

    /* Border radius for Chrome, Webkit and other good browsers */ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -border-radius: 10px; 
    border-radius: 10px; 
} 

/* Only add border to bottom of <li> */ 
li { 
    padding: 10px; 
    border-bottom: 1px solid #ccc; 
} 

/* Get rid of the last <li>'s bottom border to stop overlap with <ul>'s border */ 
/* :last-child works in IE7+ */ 
li:last-child { 
    border-bottom: none; 
} 

/* Get the number and float it right */ 
span { 
    float: right; 
} 
​ 

Answer 2

我正在为你工作JSfiddle here。

HTML：

<ul> 
    <li><img src="http://ghickman.co.uk/images/sidebar/stackoverflow.png"/> <span>text</span> <span class="num">1</span></li> 
    <li><img src="http://ghickman.co.uk/images/sidebar/stackoverflow.png"/> <span>text</span> <span class="num">1</span></li> 
    <li><img src="http://ghickman.co.uk/images/sidebar/stackoverflow.png"/> <span>text</span> <span class="num">1</span></li> 
</ul> 

CSS：

ul { 
    border-radius:10px; 
    border:1px solid #DDD; 
    margin:10px; 
    width:200px; 
} 

li:last-child { 
    padding:7px; 
} 

li:not(:last-child) { 
    padding:7px; 
    border-bottom:1px solid #DDD; 
} 

span.num { 
    float:right; 
} 
img { 
    width:20px; 
} 

span { 
    float:none; 
} 

Answer 3

它似乎并不像你甚至试图谷歌的 “圆角”，但无论如何，你有两个选择：

1. 使用CSS属性border radius，但注意它不会在IE7中工作
2. 使用图像和background财产

Answer 4

HTML：

<ul> 
    <li>Event</li> 
    <li>Journal</li> 
    <li>Task</li> 
</ul> 

CSS：

ul { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background:#3d3d3; border:1px solid gray; width:400px; } 
ul li { padding: 5px 5px 5px 20px; border-top:1px solid gray; } 

这里是JsFiddle了点。