来自 UL 的 Jquery 风格的按钮集？

Question

我目前正在为网站设置主题，并且导航采用列表格式:

<ul> <li>nav1</li> <li>nav2</li> ... </ul>

我想把列表变成一个按钮集，只在外面有圆 Angular 。

ASCII 艺术近似值:

( nav 1 | nav 2 | nav 3 | nav 4 )

JQuery-UI 中有一个很好的例子，但它是为单选按钮而不是列表项设计的。我尝试自己进行更改，但 IE 无法识别 :last-child 所以我无法将正确的 Angular 圆化。

有什么提示/建议吗？

Answer 1

标记看起来像这样:

<ul>
  <li class="first">button1</li>
  <li class="second">button2</li>
  <li>button3</li>
  <li class="last">button4</li>
</ul>

它的 CSS 是:

ul {margin:0px;padding:0px;list-style-type:none;}
ul li {margin:0px;padding:0px 5px;border:1px solid #333;}
ul li.first {border-top-left-radius: 100px;border-bottom-left-radius: 100px;border-right:0px;}
ul li.last {border-top-right-radius: 100px;border-bottom-right-radius: 100px;border-left:0px;}
ul li.second {border-right:0px;}