一定高度的CSS边框

Question

我有一个带导航的网站，有一些边界作为传承者。但是我不希望边界从顶部延伸到底部。知道怎么做吗？

目前，我有第一张图片，但我想制作较低版本的图像。我在想padding或line-height，但我不确定......

Answer 1

在另一个内部创建<div>。

.first{
line-height:20px;
}

.second{
height:15px;
border-right:1px solid #000000;
}

然后

<div class="first">
<div class="second">Test here</div>
</div>

Answer 2

使用填充是

.yourlink {display:inline-block;padding:10px 0; border-right: 1px solid #000;}

制定出一个解决方案： http://jsfiddle.net/X4DZS/1/

HTML

<ul id="mymenu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
</ul>

CSS

#mymenu {display:block;height:40px;padding:10px;background-color:Green;}
#mymenu li {display:inline-block;background-color:Green;float:left;}
#mymenu a {display:block;color:#000;padding:10px;border-right:1px solid #000;height:20px;text-decoration:none;}
#mymenu li:hover {background-color: Blue;}
#mymenu li:hover a {color:#fff;text-decoration:underline;}

Answer 3

最简单的方法是在另一个div内使用div，内部div可以获取边框，外部可以使用填充。