风格无序列表显示在圆角框列表中的项目

我想风格<ul>，以显示带圆角的框中的所有项目（见下文）：风格无序列表显示在圆角框列表中的项目

enter image description here

是否有可能使用CSS和只有<ul>（没有额外的<div>和表），因为我打算在CMS系统中使用它来设置由用户创建的所有<ul>？

2009-07-10 Nicholas

我能够使用重建图像以下（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。

来源

2009-07-10 14:19:45 Travis

https://jsfiddle.net/1u3nma6t/以防其他人需要看到它。 – Si8 2017-02-13 17:10:05

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

这只会在Firefox和Safari的工作，虽然。

来源

2009-07-10 09:29:26 philnash

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

您可能想看看JS + CSS解决方案：nifty corners。

来源

2009-07-10 09:31:50

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

来源

2009-07-10 09:33:13

jQuery Corner不适用于IE – Yosef 2010-08-01 15:32:01

如果你可以标记最后里，你可以把底角上 - 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。

来源

2009-07-10 11:21:56 Emily

风格无序列表显示在圆角框列表中的项目

回答

相关问题