Question

我正在尝试根据父li的类来匹配ul个项目，以便设置li s（内联块）的宽度。

这是相应的代码。我认为这三个li应该匹配......并且宽度为33％......

<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>

有什么想法吗？

Answer 1

您不需要这么多课程，但是您可以将li匹配为：

ul.listing_wrap li {
   width:33%;
}

Answer 2

类标识符不应以数字开头。对于测试，设置“col3”而不是“3col”，你会发现它有效！

Answer 3

ul.3col > li将匹配li的所有ul与.3col类的同义词

但是，如果您使用%宽度，则应确保该元素实际上具有与％表示的实际px相关的父元素，否则结果可能不可靠。

Answer 4

选择器越简单越好。所以这就够了：

li { width: some other with for not 3 columns style}
.3col > li { width:33% }

3col也不是有效的类名。

Answer 5

或者使用table-cells ...然后你不必担心宽度：

.container { display: table; }
.container ul { display: table-row; }
.container ul li { display: table-cell; }

如何匹配CSS LI和设置宽度

5 个答案: