在顶部栏中创建一个完整高度的链接

Question

我正在尝试在顶部栏中放置一些按钮，您可以在其中选择显示语言。这些按钮应该在顶部栏中具有全高，就像其他按钮一样：

但由于某种原因，我无法将这些按钮调到全高：

这是我的html和css设置的小提琴：http://jsfiddle.net/gLgwm/1/

我尝试使用以下不起作用的CSS：

#CtlLanguageSelection,
#CtlLanguageSelection a {
    line-height: 35px !important;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
} 

还尝试将min-height和height设置为100%和35px，但无效。

Answer 1

a是内联元素，因此文本占用的空间很大。将其设为inline-block

http://jsfiddle.net/gLgwm/4/

#CtlLanguageSelection a {
    line-height: 35px !important;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
    cursor:pointer;
}

Answer 2

添加：

#CtlLanguageSelection a {
    height: 100%;
    display: inline-block;
}

如果我们将它们设置为height: 100%;并给它们display: inline-block，它就可以正常工作。

DEMO HERE

---

注意：如果您不希望它们之间存在这么小的差距（由inline-block引起），您可以这样做：

<a id="CtlChangeLanguageDE">de</a><a id="CtlChangeLanguageEN">en</a>

只需要一个小技巧来排序它，还有很多其他方法可以让你在必要时查找它们。

DEMO HERE