Html 如何匹配CSS LI和设置宽度
我试图根据父级Html 如何匹配CSS LI和设置宽度,html,css,Html,Css,我试图根据父级ul的类匹配li项，以便设置lis（内联块）的宽度 下面是相应的代码。我认为三个lis应该匹配。。。宽33% <html> <head> <style type="text/css"> BODY { text-align: center; } DIV.listing_wrap { border: 1px solid red; } DIV.listing_wrap UL {
ullilili<html>
<head>
<style type="text/css">
BODY {
text-align: center;
}
DIV.listing_wrap {
border: 1px solid red;
}
DIV.listing_wrap UL {
border: 1px solid orange;
}
DIV.listing_wrap UL LI {
display: inline-block;
list-style-type: none;
border: 1px solid blue;
}
DIV.listing_wrap UL.3col LI {
width: 33%;
}
</style>
</head>
<body>
<div class="listing_wrap">
<ul class="3col">
<li class="t">1
</li>
<li class="t">2
</li>
<li class="r t">3
</li>
</ul>
</div>
</body>
</html>
身体{
文本对齐：居中；
}
DIV.u包装{
边框：1px纯红；
}
DIV.listing_wrap UL{
边框：1px实心橙色；
}
第二部分：列表{
显示：内联块；
列表样式类型：无；
边框：1px纯蓝色；
}
DIV.listing_wrap UL.3col LI{
宽度：33%；
}
- 1
- 2
- 3
有什么想法吗 您不需要太多的类，但是您可以将
liul.listing_wrap li {
width:33%;
}
类标识符不应以数字开头。对于测试，设置“col3”而不是“3col”，您将看到它工作
ul.3col>liulli.3col但是，如果您使用的是
%li { width: some other with for not 3 columns style}
.3col > li { width:33% }
另外，
3col.container { display: table; }
.container ul { display: table-row; }
.container ul li { display: table-cell; }
嘿，谢谢，是的，我知道这一点，但上面的示例是从更大的角度拍摄的，因此类的定义更明确。正如其他人所指出的，3col不是类的有效名称。但是，如果无法重写CSS规则，请尝试使用
！重要信息