如何将列表中<a>标签对齐至图片下方？CSS布局问题求助

嘿，作为HTML/CSS新手遇到这种布局问题太正常了，我来帮你捋清楚问题根源并搞定它！

问题出在哪？ #

你现在给<li>设置了display: inline;，这会让列表项变成行内元素——行内元素的内部是没法让子元素自动换行的，哪怕你给<a>加了display:block;，也会因为父元素<li>是inline而失效，所以锚点才会和图片挤在同一行。

解决方案：换用inline-block #

把<li>的display属性改成inline-block就好啦！行内块元素（inline-block）既可以像行内元素一样横向排列，又能像块级元素一样容纳内部的上下布局，这样图片和锚点就能自然上下对齐了。

另外可以给<li>加一点左右间距，避免各个卡片挤在一起，体验会更好。

修改后的完整代码 #

/* Car showcase */
.car-showcase { margin: 0px; padding: 0px; }
.car-showcase ul { list-style-type: none; text-align: center; padding: 0; }
.car-showcase ul li { 
  display: inline-block; /* 核心修改 */
  margin: 0 10px; /* 增加卡片间距，可选优化 */
}
.car-showcase ul li a { 
  display: block; /* 让锚点占满li宽度，点击区域更大 */
  color: white; 
  background-color: #ae9595; 
  text-decoration: none; 
  padding: 4px 12px; /* 用固定单位更直观，百分比在小屏幕易变形 */
  transition: 0.5s; 
  margin-top: 8px; /* 给图片和按钮加一点间距，更美观 */
}
.car-showcase ul li a:hover { 
  color: rgba(255, 255, 255, 0.719); 
  border: solid 1px black; 
}
.car-model { width: 25%; }

<div class="car-showcase">
  <ul>
    <li>
      <img class="car-model" src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png" alt="Car model">
      <a href="#">View car</a>
    </li>
    <li>
      <img class="car-model" src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png" alt="Car model">
      <a href="#">View car</a>
    </li>
    <li>
      <img class="car-model" src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png" alt="Car model">
      <a href="#">View car</a>
    </li>
  </ul>
</div>

额外小提示 #

• inline-block是这种卡片横向布局的常用方案，比老式的float布局更易维护；
• 给<a>加display:block不仅能让它在图片下方，还能让整个按钮区域都可点击，提升用户体验；
• 把padding的百分比改成固定像素（px），在不同屏幕尺寸下布局会更稳定。

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