html - 不在水平居中

Question

我想制作一个水平显示的图像列表。问题是段落显示正确，但图像不正确。我的代码：

ul, li {
  list-style-type: none;
  display: inline-block;
}

img {
  margin-bottom: 20px;
  border: 5px solid black;
  border-radius: 3px;
}

<ul>
  <li>
    <img src="a.png" style="max-width: 20%;">
  </li>
  <li>
    <img src="b.png" style="max-width: 20%;">
  </li>
</ul>

标签： htmlcss

Answer 1

问题在于您添加到图像中的内联样式。申请max-width: 20%的时候，旁边会有80%的空白空间，这样在大屏的时候，图片右边的空间很大，在小屏的时候，因为空间的关系，会竖着显示。

只需为图像添加固定宽度或使用vw度量（例如：）max-width: 20vw，以便图像获得相对于视口宽度的宽度。