html - 检测列表是否溢出并在 css 中给它一个类

Question

如果不用 javascript 就可以的话，我想用 CSS 来做。

我有一个包含 x 个元素的列表，它可以是任何元素。这是一张图片

容器占屏幕的百分比，因此当我调整大小时，ul 变小，因此列表项换行。

我想做的是，如果有 1 行，则给 ul 文本居中对齐，如果有 2 行，则文本居左对齐。

仅使用 css 是否可行？

我无法进行媒体查询，因为元素的数量可以是任何数量。

Answer 1

你在找类似 this 的东西吗？ ？

body {
  background: #11b5c3;
  font-family: sans-serif;
  padding: 50px;
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 100;
}


/*
.container {
  border-top: 1px solid #fff;
  padding: 10px 0;
  margin: 0 auto;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width:75%;
}

.container li {
  background: #fefefe;
  margin: 3px;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  color: #999;
}*/

.container {
  border-top: 1px solid #fff;
  padding: 10px 0;
  margin: 0 auto;
  list-style: none;
  /* display:flex; */
  /*justify-content:center;*/
  flex-wrap: wrap;
  max-width: 500px;
  text-align: justify;
}

.container li {
  background: #fefefe;
  ;
  margin: 3px 0;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  color: #999;
  display: inline-block;
  font-size: 16px;
}

<h1>Tools</h1>
<ul class="container">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>