CSS 列表项宽度/高度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2295311/
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
CSS list item width/height does not work
提问by Luuk
I tried to make a navigation inline list. You can find it here: http://www.luukratief-design.nl/dump/parallax/para.html
我试图制作一个导航内联列表。你可以在这里找到它：http: //www.luukratief-design.nl/dump/parallax/para.html
For some reason it does not display the width and height of the LI. Here is the snippet. What is wrong with this?
出于某种原因，它不显示 LI 的宽度和高度。这是片段。这有什么问题？
.navcontainer-top li {
font-family: "Verdana", sans-serif;
margin: 0;
padding: 0;
font-size: 1em;
text-align: center;
display: inline;
list-style-type: none;<br>
width: 117px;
height: 26px;
}
.navcontainer-top li a {
background: url("../images/nav-button.png") no-repeat;
color: #FFFFFF;
text-decoration: none;
width: 117px;
height: 26px;
margin-left: 2px;
margin-right: 2px;
}
.navcontainer-top li a:hover {
background: url("../images/nav-button-hover.png") no-repeat;
color: #dedede;
}
回答by Tatu Ulmanen
Declare the aelement as display: inline-blockand drop the width and height from the lielement.
将a元素声明为display: inline-block并从li元素中删除宽度和高度。
Alternatively, apply a float: leftto the lielement and use display: blockon the aelement. This is a bit more cross browser compatible, as display: inline-blockis not supported in Firefox <= 2 for example.
另外，适用float: left于li元素和使用display: block上的a元素。这有点跨浏览器兼容，例如display: inline-block在 Firefox <= 2 中不支持。
The first method allows you to have a dynamically centered list if you give the ulelement a width of 100% (so that it spans from left to right edge) and then apply text-align: center.
第一种方法允许你有一个动态居中的列表，如果你给ul元素一个 100% 的宽度（这样它从左到右边缘跨越）然后应用text-align: center.
Use line-heightto control the text's Y-position inside the element.
使用line-height控制单元内的文本的Y位置。
回答by Ikke
Inline items cannot have a width. You have to use display: blockor display:inline-block, but the latter is not supported everywhere.
内联项目不能有宽度。您必须使用display: block或display:inline-block，但并非所有地方都支持后者。
回答by anthares
I think the problem is, that you're trying to set width to an inline element which I'm not sure is possible. In general Li is block and this would work.
我认为问题是，您试图将宽度设置为内联元素，我不确定这是否可行。一般来说，Li 是块状的，这会起作用。
回答by Jeff Maes
Using width/height on inline elements is not always a good idea.
You can use display: inline-blockinstead
在内联元素上使用宽度/高度并不总是一个好主意。您可以使用display: inline-block替代
回答by Paolo
Remove the <br>from the .navcontainer-top listyles.
<br>从.navcontainer-top li样式中删除。
回答by Skippy le Grand Gourou
I had a similar issue trying to fix the item size to fit the background image width. This worked (at least with Firefox 35) for me?:
我在尝试修复项目大小以适应背景图像宽度时遇到了类似的问题。这对我有用（至少在 Firefox 35 上）？：
.navcontainer-top li
{
display: inline-block;
background: url("../images/nav-button.png") no-repeat;
width: 117px;
height: 26px;
}
