Question

嘿伙计们我正在使用波旁威士忌整洁的框架来创建一个响应式缩略图库。现在它生成了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块方法。您需要向父级添加三个声明，以便删除与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
}

列出未正确显示的项目

1 个答案: