logo标签列表

将无序列表样式设置为在圆角框中显示列表项

htmlcss
6
我想为一个`
    `标签设置样式使得所有的项目都显示在带有圆角的框中（见下图）。 enter image description here 是否可以只使用CSS和`
      `标签（没有额外的`
      `或表格），因为我将在CMS系统中使用它来为用户创建的所有`
        `设置样式？
5个回答
2
这是一个使用CSS3实现圆角的很好的例子：CSS3 Rounded corners。但是这只能在Firefox和Safari中使用。
1
如果您可以标记最后一个li，您可以将底部角放在那里 - 我的圆角列表。 
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。
1
我使用以下的(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>

最终结果如下所示：

截图 http://img19.imageshack.us/img19/2194/screenshotdzn.png

但它只在Firefox、Chrome、Safari和支持CSS3的浏览器中有效。这可悲地排除了IE。
1

看看jQuery Corner，它提供了更圆润的边角解决方案;-) 它需要JS和CSS，但具有很多开箱即用的灵活性。

0

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

你可能想要看一下JS+CSS解决方案：nifty corners。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接