Question

我需要设置常规html列表的样式，如下图所示：

alt text http://i48.tinypic.com/2vjd7pg.jpg

如您所见，每个列表项的两侧都有填充，顶部和底部边框。悬停时，边框的宽度为<ul>项的100％。现在问题实际上是：当你给每个<li>元素一个顶部＆amp;底部边框我在每个元素之间有一个2 px的边框（第一个元素的底部边框和第二个元素的顶部边框），我不希望这样，但我不知道任何解决方案。

我的HTML：

<div id="tab_top" class="tab">
        <div class="bottom">
          <div class="cont">
            <ul>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
            </ul>
          </div>
        </div>
      </div>

我的css：

#tabs .tab div.cont ul li a{line-height:30px; height:30px; color:#3ca097; display:block; padding-left:11px; padding-right:13px; width:259px;}
#tabs .tab div.cont ul li a span.ct{float:right;background:url(images/count_comments.gif) no-repeat left top; height:13px; padding-left:16px; margin-top:10px; line-height:12px;}
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2;  border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}
#tabs .tab div.cont ul li a:hover span.ct{background-position:left bottom; color:#23665f; margin-top:9px;}

如果你能帮助我，我会很高兴

你真实地

Answer 1

您可以使用底部边框，第一个也包含顶部边框..

为第一项使用额外的类，或使用:first-child伪类（IE6不支持）

Answer 2

如果你使用border-top和border-bottom，你是正确的，你将获得1px边框，如果你同时使用它们，那么请指定li + li，如下所示：

.tab div.cont ul li { border-top: 1px solid black; border-bottom:1px solid black; }
.tab div.cont ul li + li { border-top:none; }

你会得到你想要的东西。

Answer 3

正如Pekka建议的那样，在删除他的答案之前，显而易见的解决方案是修改这种风格：

#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2;  border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}

成为：

#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}

不是非常'先生'，真的......除非我们都错过了什么？

Answer 4

删除顶部或底部边框，然后在第一个或最后一个li上设置内联样式，以添加一个似乎“缺失”的边框。

进阶与CSS的样式列表

4 个答案: