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。