我有一个带有导航和一些边框的网站作为分隔符。但我不希望边界从上到下延伸。知道如何做到这一点吗?
目前,我有第一张图片,但我想制作下一张。我在想 padding
或 line-height
,但我不确定...
最佳答案
使用填充是
.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;}
关于一定高度的CSS边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8635828/