在CSS中为无序列表设置高度？

Question

我的页面页面有一个列表，我想要水平显示。

但是因为我把它变成了一个内联列表才能水平移动，所以背景图像会被垂直切断。最大的是27px高。

所以我被卡住了......我知道为什么以下是做它正在做的事情。但是我该如何解决它呢？

这是html：

<div id="footer">
    <ul>
        <li id="footer-tmdb"><a href="">Film data courtesy of TMDB</a></li>
        <li id="footer-email"><a href="">Contact Us</a></li>
        <li id="footer-twitter"><a href="">Follow Us</a></li>
    </ul>
</div>

和CSS：

#footer ul {
    height: 27px;
}

#footer ul li {
    display: inline;
    list-style: none;
    margin-right: 20px;
}

#footer-tmdb {
    background: url('../images/logo-tmdb.png') no-repeat 0 0;
    padding-left: 140px;
}

#footer-email {
    background: url('../images/icon-email.png') no-repeat 0 3px;
    padding-left: 40px;
}

#footer-twitter {
    background: url('../images/icon-twitter.png') no-repeat 0 0;
    padding-left: 49px;
}

这是它的样子：

如您所见，有一半图像被切断了。

解决方案越简单越好。

Answer 1

使用inline-block

#footer li {
  height: 27px;
  display: inline-block;
}

Answer 2

#footer ul li {
    display: block;
    float: left;
    height: 27px;
    list-style: none;
    margin-right: 20px;
}

Answer 3

试试这个：

#footer ul {
    overflow: auto
}

#footer ul li {
    display: block;
    list-style: none;
    margin-right: 20px;
    float: left;
}

Answer 4

试试这个：

#footer li,
#footer ul {
    height: 27px;
}