文章/答案/技术大牛

发布

社区首页 >问答首页 >在移动端一个接一个地显示Coolum数据，而在桌面上只用CSS一行显示，

问在移动端一个接一个地显示Coolum数据，而在桌面上只用CSS一行显示，
EN

Stack Overflow用户

提问于 2021-07-09 17:32:02

回答 2查看 36关注 0票数 0

我有一个在CSS的挑战，不允许HTML更改。

创建了一个脚注项目的小列表，这些项目在DOM中是按行排列的，但在桌面上需要像对待列一样对待，但在移动设备上，每一列都应该一个接一个。这是我到目前为止尝试过的代码，也是所需要的。

.cmp-footer-navigation__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}

.cmp-footer-navigation__item {
  width: 20%;
}

<ul class="cmp-footer-navigation__group">
  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/" data-title="HOME" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 1</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/patients-and-families" data-title="Patients &amp; Families" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 6</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/locator" data-title="Locations" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 11</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="https://www.pruittcares.org/" data-title="Donate" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_blank">Link 15</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/emergency-preparedness" data-title="COVID-19" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 19</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company" data-title="Our Company" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 2</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/skilled-nursing" data-title="Skilled Nursing" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 7</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/resources-home" data-title="Resources" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 12</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/partner-services" data-title="Partner Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 16</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us/privacy-policy" data-title="Privacy policy" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 20</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/news-list" data-title="News" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 3</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/home-health" data-title="Home Health" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 8</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/employment" data-title="Careers" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 13</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/vendor-services" data-title="Vendor Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 17</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us/terms-of-use" data-title="Terms of Use" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 21</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us" data-title="Contact" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 4</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/hospice" data-title="Hospice &amp; Palliative Care" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 9</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services" data-title="Other Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 14</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/medical-supply" data-title="Medical &amp; Nutritional Supply" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 18</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/content/dam/pruitthealth/documents/pdf/Section%201557%20Notice%20-%20Doc%20for%20Website.pdf" data-title="Notice of Nondiscrimination" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 22</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" href="#" target="_self">Link 5</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/senior-living" data-title="Senior Living" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 10</a>
  </li>
</ul>

正如您在给定代码中看到的那样，数据实际上是以行为单位的，但挑战在于如何将其视为行，然后在移动设备上，每列都应该一个接一个地出现。

我试图用第n个子逻辑来实现这一点，

就像这样，&:nth-child(5n+1){}

但是无法获得想要的结果，是否可以使用第n个子节点或网格？或者任何其他方法都更好。

css

flexbox

grid

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-07-09 17:48:21

您可以通过使用您尝试的第n个子方法轻松地实现这一点，您所需要做的就是计算您的逻辑，

根据你的问题，我在这里假设你的项目宽度在桌面上将保持20%，即。每行5个项目。然后这样做。

.cmp-footer-navigation__group {
  display: flex;
  flex-direction: column;
}

.cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n+1) {
  order: -5;
}

.cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-3) {
  order: -4;
}

.cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-2) {
  order: -3;
}

.cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-1) {
  order: -2;
}

.cmp-footer-navigation__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}

.cmp-footer-navigation__item {
  width: 20%;
}

@media(max-width: 481px) {
  .cmp-footer-navigation__group {
    display: flex;
    flex-direction: column;
  }
  .cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n+1) {
    order: -5;
  }
  .cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-3) {
    order: -4;
  }
  .cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-2) {
    order: -3;
  }
  .cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-1) {
    order: -2;
  }
}

<ul class="cmp-footer-navigation__group">
  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/" data-title="HOME" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 1</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/patients-and-families" data-title="Patients &amp; Families" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 6</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/locator" data-title="Locations" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 11</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="https://www.pruittcares.org/" data-title="Donate" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_blank">Link 15</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/emergency-preparedness" data-title="COVID-19" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 19</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company" data-title="Our Company" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 2</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/skilled-nursing" data-title="Skilled Nursing" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 7</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/resources-home" data-title="Resources" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 12</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/partner-services" data-title="Partner Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 16</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us/privacy-policy" data-title="Privacy policy" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 20</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/news-list" data-title="News" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 3</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/home-health" data-title="Home Health" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 8</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/employment" data-title="Careers" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 13</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/vendor-services" data-title="Vendor Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 17</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us/terms-of-use" data-title="Terms of Use" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 21</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us" data-title="Contact" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 4</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/hospice" data-title="Hospice &amp; Palliative Care" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 9</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services" data-title="Other Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 14</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/medical-supply" data-title="Medical &amp; Nutritional Supply" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 18</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/content/dam/pruitthealth/documents/pdf/Section%201557%20Notice%20-%20Doc%20for%20Website.pdf" data-title="Notice of Nondiscrimination" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 22</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" href="#" target="_self">Link 5</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/senior-living" data-title="Senior Living" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 10</a>
  </li>
</ul>

票数 1

Stack Overflow用户

发布于 2021-07-09 17:44:27

如果可以访问DOM，可以这样做:将每一列包装到一个<li>标记中，并使用flex-direction : column

.cmp-footer-navigation__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}

.cmp-footer-navigation__list {
  display: flex;
  flex-direction: column;
}

.cmp-footer-navigation__item {
  width: 20%;
}

@media (max-width: 576px) {
  .cmp-footer-navigation__group {
    flex-direction: column;
  }
}

<ul class="cmp-footer-navigation__group">
  <li class="cmp-footer-navigation__list">
    <a class="cmp-footer-navigation__item"> link 1 </a>
    <a class="cmp-footer-navigation__item"> link 2 </a>
    <a class="cmp-footer-navigation__item"> link 3 </a>
    <a class="cmp-footer-navigation__item"> link 4 </a>
    <a class="cmp-footer-navigation__item"> link 5 </a>
  </li>
  <li class="cmp-footer-navigation__list">
    <a class="cmp-footer-navigation__item"> link 6 </a>
    <a class="cmp-footer-navigation__item"> link 7 </a>
    <a class="cmp-footer-navigation__item"> link 8 </a>
    <a class="cmp-footer-navigation__item"> link 9 </a>
    <a class="cmp-footer-navigation__item"> link 10 </a>
  </li>
</ul>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68314543

复制

相似问题

问在移动端一个接一个地显示Coolum数据，而在桌面上只用CSS一行显示，
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在移动端一个接一个地显示Coolum数据，而在桌面上只用CSS一行显示，EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在移动端一个接一个地显示Coolum数据，而在桌面上只用CSS一行显示，
EN