CSS 菜单背景高度和文本高度

【问题标题】：CSS Menu Background Height and Text HeightCSS 菜单背景高度和文本高度
【发布时间】：2013-02-05 19:53:18
【问题描述】：

我正在尝试在我的菜单项后面使用背景图片和/或颜色。使用图像或仅使用背景颜色，背景将仅与文本的高度匹配。背景的高度需要为 30 像素，文本需要为 16 像素并居中 - 就像普通按钮一样。我已经尝试了所有我能想到的 css 组合，但无法得到我想要的结果。

    #menu-container {
    /*float: left;*/
width: 960px;
margin:50px auto 0 auto;
height:50px;
    }

    #menu ul {
text-align: left;
height:50px;
    }


    #menu ul li {
display: inline;
background-image: url(images/menubutton.png);
background-repeat: no-repeat;
    }

     #menu ul li a {
text-transform: uppercase;
padding-right: 13px;
padding-left: 13px;
font-size: 16px;
    /*line-height: 0.2em;*/
color: #000;
font-style: normal;
letter-spacing: 1px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
     Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 400;
    }

    #menu ul li a:hover {
color: #ff0000;
text-decoration: none
    }

【问题讨论】：

你的意思是这样的？ codepen.io/anon/pen/Ktedj

标签： css button menu height

【解决方案1】：

这是您需要的代码：

#menu ul li {
    display: inline-block;
    background-color: #a0a0a0; /* I changed this for testing */
    background-repeat: no-repeat;
    padding-top: 7px;
    padding-bottom: 7px;
}

基本上，它曾经是display: inline，它使您无法调整高度。您也不能使用display: block，因为那样它们就不会都在同一行。所以，display: inline-block 正是您所需要的。
然后我添加了padding-top 和padding-bottom 和7px 以将文本保持在中间。

这是一个有效的DEMO

希望这会有所帮助。

【讨论】：