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了點。