Question

我目前正在关注一个网站，导航采用列表格式：

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

我想把列表变成一个只在外面带圆角的按钮组。

ASCII艺术近似：

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

JQuery-UI中有一个很好的例子，但它是专为单选按钮而不是列表项而设计的。我自己尝试进行更改，但IE无法识别：最后一个孩子所以我无法将正确的角落四舍五入。

任何提示/建议？

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;}

Answer 2

只需在ul本身上使用border-radius。

http://jsfiddle.net/T4cRS/

如果您使用<nav>

，应该使用HTML5 <!doctype html>标记

UL的Jquery式按钮组？

2 个答案: