如何在WooCommerce中让所有元素横向排列？

要让你HTML里的三个列表项横向排列，用下面几种简单的CSS方法就能实现：

方法1：Flexbox布局（推荐） #

这是目前最主流的布局方式，灵活且兼容性好，给父元素<ul>添加flex属性即可：

.atc_nsv ul {
  list-style: none; /* 移除默认的列表圆点 */
  padding: 0;
  margin: 0;
  display: flex; /* 开启横向排列 */
  gap: 20px; /* 控制列表项之间的间距，可按需调整 */
  align-items: center; /* 让内容垂直居中 */
}

.atc_nsv li {
  display: flex;
  align-items: center; /* 让每个列表项里的图片和文字垂直对齐 */
}

方法2：inline-block方式（兼容旧浏览器） #

如果需要适配更老的浏览器，可以用这种方式：

.atc_nsv ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0; /* 消除列表项之间的空白间隙 */
}

.atc_nsv li {
  display: inline-block; /* 让列表项横向排列 */
  font-size: 14px; /* 恢复文字默认大小，可按需调整 */
  margin-right: 20px; /* 控制间距 */
  display: flex;
  align-items: center;
}

/* 给最后一个列表项去掉右侧间距 */
.atc_nsv li:last-child {
  margin-right: 0;
}

把上面的CSS代码添加到你的样式文件里，或者页面的<style>标签中，就能实现你想要的横向排列效果了。

内容的提问来源于stack exchange，提问作者Death Note