多行上的内联列表，具体取决于屏幕大小

Question

我有一个内联列表，当屏幕变得太小而无法容纳文本时，我希望将它分成两条不同的行（我可以定义媒体查询，因为内容总是相同的大小）。知道如何让这样的事情发生吗？

这是我目前所拥有的，但在调整大小时，它本身就会缩小：

.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
}
.tabs__item {
  display: table-cell;
  border: 1px solid red;
  border-left-width: 0;
}
.tabs__item:first-child {
  border-left: 1px solid red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.tabs__item:last-child {
  border-right: 1px solid red;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

<ul class="tabs">
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
</ul>

提前致谢。

Answer 1

希望我帮助过。这段代码可以解决问题。

.tabs, .tabs2 {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  table-layout: fixed;
  width: 50%;
  text-align: center;
}

.tabs__item, .tabs__item2 {
  display: table-cell;
  border: 1px solid red;
  border-left-width: 0;
}
.tabs__item:first-child {
  border-left: 1px solid red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.tabs__item2:last-child {
  border-right: 1px solid red;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

@media (max-width:768px) {
  .tabs, .tabs2 {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
  clear:both;
}
  .tabs__item:first-child, .tabs__item2:first-child {
  border-left: 1px solid red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.tabs__item:last-child, .tabs__item2:last-child {
  border-right: 1px solid red;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
}

<ul class="tabs">
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
</ul>
<ul class="tabs2">
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
</ul>