html - 列表项显示不正确

Question

大家好，我正在使用 bourbon neat 框架来创建响应式缩略图库。现在它生成了 css，不知何故，当我调整大拇指时，它似乎错位了。这是我使用的代码

    * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background-color: #f4f4f4; }

.galleryContainer {
  *zoom: 1;
  max-width: 77.0625em;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px !important; }
  .galleryContainer:before, .galleryContainer:after {
    content: " ";
    display: table; }
  .galleryContainer:after {
    clear: both; }
  .galleryContainer .galleryList {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
    border: 2px solid red; }
    .galleryContainer .galleryList:last-child {
      margin-right: 0; }
    .galleryContainer .galleryList ul {
      list-style: none;
      margin: 0;
      padding: 0; }
    .galleryContainer .galleryList li {
      float: left;
      padding: 0;
      margin: 0;
      width: 20%;
      padding: 0px; }
      @media screen and (min-width: 1338px) {
        .galleryContainer .galleryList li {
          width: 10%; } }
    .galleryContainer .galleryList img {
      width: 100%;
      height: 100%; }

您可以在我的演示页面中查看问题 DEMO

请告诉我哪里做错了。谢谢。

Answer 1

您设置的 float: left 似乎是导致调整大小时出现问题的原因。在这个例子中使用 li 元素，我会采用 display-inline block 方法。您需要向父级添加三个声明，以删除与 inline-block 元素关联的边距。

你的 CSS

.galleryContainer .galleryList li {
float: left; <-- remove this
display: inline-block;
padding: 0;
margin: 0;
width: 20%; 
padding: 0px;
font-size: 0px;
}

.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0px;  <-- add this
letter-spacing: 0px;  <-- add this
word-spacing: 0px;  <-- add this
}