使用CSS实现列表及内部链接居中替代table布局的问题咨询

数据老陈

2026-10-10

布局调整实现方案

实现逻辑

外层容器采用flex布局实现列表整体水平居中，兼容性优于传统margin居中方案，不会出现居中失效问题
清除无序列表默认的内外边距与项目符号，设置最大宽度限制大屏显示宽度，小屏自动适配避免排版错乱
所有列表项内置文本居中，保留原有黑色主题、分隔线、hover交互的视觉效果

完整代码

CSS样式代码

/* 外层容器样式，可直接复用原有w3-container类扩展 */
.art-links-container {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
  background-color: #000;
}

.art-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 大屏下最大宽度可按需调整，避免内容过宽 */
  max-width: 600px;
  /* 小屏左右预留10%边距，不会贴边显示 */
  width: 90%;
}

.art-links-title {
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
}

.art-links-item {
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid #333;
}

.art-links-item a {
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
}

.art-links-item a:hover {
  text-decoration: underline;
}

HTML结构代码

<div class="w3-container art-links-container">
  <ul class="art-links-list w3-black w3-hoverable">
    <li class="art-links-title"><h2>FIND MY ART</h2></li>
    <li class="art-links-item">
      <h3><a href="https://opensea.io/creepybits">OpenSea</a></h3>
    </li>
    <li class="art-links-item">
      <h3><a href="https://rarible.com/creepybits">Rarible</a></h3>
    </li>
    <li class="art-links-item">
      <h3><a href="https://foundation.app/@creepybits">Foundation</a></h3>
    </li>
    <li class="art-links-item">
      <h3><a href="https://www.bakeryswap.org/#/usercenter/0x021E8A6bEC4300362165546f2F0F7E3baACf3aDe?artist=Creepybits">BakerySwap</a></h3>
    </li>
  </ul>
</div>