Question

我想设置<ul>样式以显示带圆角的框中的所有项目（见下文）：

enter image description here

是否可以使用CSS而只使用<ul>（没有额外的<div>和表），因为我将在CMS系统中使用它来设置所有{{1}的样式用户创建的？

Answer 1

以下是使用CSS3圆角的一个很好的例子：CSS3 Rounded corners

这只适用于Firefox和Safari。

Answer 2

查看jQuery Corner以获得更圆润的转弯解决方案;-)它确实涉及JS和CSS，但具有很多开箱即用的灵活性。

Answer 3

如果您可以标记最后一个li，则可以将底角放在 - My rounded corner list.

上

ul {background:transparent url(rc_top.jpg) 0 0 no-repeat;width:459px;padding:20px 0 0 0;}
ul li {background-color:#ebebeb;padding-left: 40px;}
ul li.last {background:transparent url(rc_bot.jpg) 0 bottom no-repeat;padding-bottom:20px;}

<ul>
    <li>one</li>
    <li>two</li>
    <li class="last">three</li>
</ul>

如果不关心IE6和7，您可以使用ul li:last-child代替ul li.last。

Answer 4

我能够使用以下（X）HTML和CSS重新创建您的图像：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>UL Corners</title>
        <style type="text/css">
            ul {
                background-color: #EBEBEB;
                list-style-image: url(arrow.png);
                font-family: Verdana, Helvetica, sans-serif;
                font-size: 11px;
                padding: 15px;
                width: 410px;
                border-radius: 20px;
                -moz-border-radius: 20px;
                -webkit-border-radius: 20px;
            }
            li {
                margin: 10px;
                margin-left: 25px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                Functional DR (Disaster Recovery)
            </li>
            <li>
                Virtual off site contact centre management
            </li>
            <li>
                Technology, Connectivity, Process and Resource Management in disaster recovery site
            </li>
            <li>
                Mission Critical Response Service Level Agreements and Logistical management
            </li>
        </ul>
    </body>
  </html>

最终结果如下：

screenshot http://img19.imageshack.us/img19/2194/screenshotdzn.png

但它仅适用于Firefox，Chrome，Safari和任何支持CSS3的浏览器。 遗憾地排除了IE。

Answer 5

仅使用UL标签，我不知道可变高度块的纯CSS 2解决方案（对于固定高度：你有滑门技术）。

您可能希望查看JS + CSS解决方案：nifty corners。

样式无序列表以在圆角框中显示列表项

5 个答案: