Question

如果没有JavaScript，我想在CSS中做到这一点。

我有一个包含x个项目的列表，它可以是任何东西。这是一张图片

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

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

仅CSS可以做到吗？

我无法进行媒体查询，因为项数可以是任何东西。

Answer 1

您是否正在寻找类似this的东西？

strscpy

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

Answer 2

我正在背负@Mobarak Ali，但我认为在这种情况下，您要使用网格而不是flexbox。如果您将flexbox与flexwrap: wrap;和justify-content: center;一起使用，则项目将始终居中。但是，OP希望不包裹的物品居中，然后在每一行的左侧对齐。由于网格用于2D布局，因此可以轻松实现这一目标。

添加或删除列表项以查看效果。如果您愿意，这是一个Codepen。 https://codepen.io/zenRyoku/pen/rgWBEp

body {
  background: teal;
  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: grid;
  justify-items: center;
  grid-template-columns: repeat( auto-fit, minmax(50px, 1fr) );
  grid-gap: 1rem;
  max-width: 500px;
}

.container li {
  width: 50px;
  background: #fefefe;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  color: #999;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
<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>
</ul>
  </body>
</html>

在CSS中检测列表是否溢出并为其提供类

2 个答案: