动态调整水平 <li> 元素的大小以保持在一行中

Question

我希望在我的页面上创建一个“画廊”部分，我可以在其中展示三个元素。我面临的问题是，当调整窗口大小或在较小的屏幕上查看时，可能会有重叠，或者可能会使用其中一个元素制作第二行。有针对这个的解决方法吗？我试图使用视口宽度（将 li 元素宽度声明为 33vw 之类的东西）来解决这个问题，但这似乎不起作用。不过，我仍然希望拥有基于“vw”的调整大小属性。

下面是一个显示问题所在的 JSfiddle。如果元素宽度更改为 33vw，则会溢出到第二行。我将它保留在 30vw 以显示我所说的水平行的意思，其中包含均匀间隔的 li 元素。此外，有没有办法让这些元素变得更小，比如 25vw，并均匀居中，它们之间有间距？

https://jsfiddle.net/1ofc4275/3/

HTML：

<div id="gallery">
  <ul>
    <li> Thing1 </li>
    <li> Thing2 </li>
    <li> Thing3 </li>
  </ul>
</div>

CSS：

#gallery ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

#gallery ul li {
  text-align: center;
  border-right: 2px solid black;
  list-style: none;
  display: inline-block;
  width: 30vw;
}

谢谢！感谢您的回答。

Answer 1

发生了一些事情。

首先，您使用vw 单位来排列网格。这些单位与容器无关，而是与视口相关。 body 元素上有一些边距，这限制了您必须布置这些列表项的空间。 100vw 实际上超过了容器的可用空间。如果您使用百分比（相对于容器）而不是视口宽度（相对于视口）之类的东西，那么您就部分存在。

其次，您的 HTML 在 <li> 元素之间有换行符。渲染时，那一点额外的空白会增加元素的宽度。有两种解决方法。一种是将<ul>上的字体大小设置为0，将子<li>上的字体大小设置为16px：

ul {
    font-size: 0;
}

    li {
        font-size: 16px;
    }

另一个是完全删除 LI 之间的空白。

<div id="gallery">
    <ul>
        <li> Thing1 </li><li> Thing2 </li><li> Thing3 </li>
    </ul>
</div>

HTML 缩小器非常适合防止这个问题。

由于您为子 LI 添加了一些框模型间距（边框），因此您需要采取的第三步是设置 box-sizing css 属性。 box-sizing 的默认浏览器值为 content-box。这意味着当您设置元素的宽度时，它将设置框内容的宽度，并为其添加内边距、边框或边距。可以在 over at CSS tricks 找到一篇关于盒子尺寸的好文章。您可以移除边框，它会起作用，或者您可以将boz-sizing 设置为border-box 并观察它全部到位。

我在这里为你整理了一个解决方案：

#gallery ul {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0;
}

#gallery ul li {
  text-align: center;
  border-right: 2px solid black;
  list-style: none;
  display: inline-block;
  width: 33.3333%;
  font-size: 16px;
  box-sizing: border-box;
}

<div id="gallery">
  <ul>
    <li> Thing1 </li>
    <li> Thing2 </li>
    <li> Thing3 </li>
  </ul>
</div>

如果您希望它们居中并均匀分布但更小，您可以在父 <ul> 上使用 text-align 。请记住在<li> 上重置它：

#gallery ul {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0;
  text-align: center;
}

#gallery ul li {
  text-align: center;
  border-right: 2px solid black;
  list-style: none;
  display: inline-block;
  width: 25%;
  font-size: 16px;
  box-sizing: border-box;
  text-align: left;
}

<div id="gallery">
  <ul>
    <li> Thing1 </li>
    <li> Thing2 </li>
    <li> Thing3 </li>
  </ul>
</div>