Html 我们可以为 li 分配宽度吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2699694/
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
can we assign width to li
提问by air
i have following html page with UL and LI, i try to assign width to each LI but can't see cay success
我有以下带有 UL 和 LI 的 html 页面，我尝试为每个 LI 分配宽度，但看不到成功
<html>
<head>
<style type="text/css">
ul
{
overflow-x:hidden;
white-space:nowrap;
height: 1em;
width: 100%;
}
li
{
display:inline;
padding-right:10px;
}
</style>
</head>
<body>
<ul>
<li style="width:100px">abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
</ul>
</body>
</html>
because each of my LI has different width.
因为我的每个 LI 都有不同的宽度。
Thanks
谢谢
采纳答案by dxh
No, you can't assign width to anything that is displayed inline, which you've set your LIto be. Instead, you most often want to use display: block; float: left;which'll allow for setting width.
不，您不能为内联显示的任何内容分配宽度，您已经设置了该宽度LI。相反，您最常希望使用display: block; float: left;which 将允许设置宽度。
回答by Gregtheitroade
Try to replace your display:inlineby display:inline-block
尝试替换你display:inline的display:inline-block
回答by Mottie
Try this CSS
试试这个 CSS
ul {
white-space: nowrap;
height: 1em;
width: 100%;
}
li {
list-style-type: none;
width: 100px;
overflow-x: auto; /* change to hidden if that's what you want */
float: left;
margin-right: 10px;
}
回答by Dolapo Adelana
You'd have to work on your code because you can't assign widths to inline elements. But this can be solved by setting the display to block and by floating it.
您必须处理代码，因为您无法为内联元素分配宽度。但这可以通过将显示设置为阻止和浮动来解决。
回答by RoToRa
You are giving the lis display: inlineand widthdoesn't apply to inline elements. You'll need to use an alternative to position the elements beside each other such as floating them.
您正在提供lisdisplay: inline并且width不适用于内联元素。您需要使用替代方法将元素放在一起，例如浮动它们。
