在 CSS 中为无序列表设置高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5953263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting a height in CSS for an unordered list?
提问by Rowan
I've got a list here for my page's footer, that I want displayed horizontally.
我在此处为我的页面页脚提供了一个列表，我希望将其水平显示。
But because I've turned it into an inline list to go horizontally, the background images get cut off vertically. The biggest one is 27px high.
但是因为我已经把它变成了一个内联列表来水平移动，背景图像被垂直切断。最大的一个是 27px 高。
So I'm stuck.. I know why the following is doing what it's doing. But how do I get around it?
所以我被卡住了..我知道为什么以下正在做它正在做的事情。但是我该如何解决呢？
Here's the html:
这是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>
and the CSS:
和 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;
}
Here's what it looks like:
这是它的样子：
As you can see, half of the images are cut off.
如您所见，一半的图像被切断了。
The simpler the solution, the better, please.
解决方案越简单越好。
回答by edgerunner
Use inline-block
用 inline-block
#footer li {
height: 27px;
display: inline-block;
}
回答by Joshua Carmody
#footer ul li {
display: block;
float: left;
height: 27px;
list-style: none;
margin-right: 20px;
}
回答by DA.
Try this:
尝试这个：
#footer ul {
overflow: auto
}
#footer ul li {
display: block;
list-style: none;
margin-right: 20px;
float: left;
}
回答by Donnie
Try this:
尝试这个：
#footer li,
#footer ul {
height: 27px;
}
