即使它们的宽度相同，两个<li>也没有正确排列</li>

Question

    body {
    font: 18px/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #ffffff;
}

a {
    font: 18px/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #ffffff;
    text-decoration: none;
}

.container {
    margin: auto;
    margin-top: 5%;
    width: 1280px;
    height: 800px;
    background-image: url(../img/background.jpg);
    overflow: hidden;
}

.content {
    margin: 100px 0 164px 170px;
}

.logo a {
    font-size: 65px;
    font-weight: 200;
    line-height: 26px;
}

.main {
    margin-top: 94px;
}

    .main li {
        background-position: center center;
        background-repeat: no-repeat;
        display: inline-block;
        height: 150px;
        width: 150px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .main li.home {
        background-color: #3387ea;
        background-image: url(../img/home.png);
        width: 150px;
        height: 150px;
    }

    .main li.about {
        background-color: #f9be3e;
        background-image: url(../img/about.png);
        width: 150px;
        height: 150px;
    }

    .main li.portfolio {
        background-color: #d3573e;
        background-image: url(../img/portfolio.png);
        width: 280px;
        height: 150px;
    }

    .main li.photos {
        background-color: #59b0e2;
        background-image: url(../img/photos.png);
        width: 150px;
        height: 150px;
    }

    .main li.testimonials {
        background-color: #33af95;
        background-image: url(../img/testimonials.png);
        width: 150px;
        height: 150px;
    }

    .main li.hire {
        background-color:  #86a73f;
        background-image: url(../img/hire.png);
        width: 310px;
        height: 150px;
    }

    .main li.blog {
        background-color: #151a26;
        width: 440px;
        height: 150px;
    }

    .main li.contact {
        background-color: #7e5b8c;
        background-image: url(../img/contact.png);
        width: 150px;
        height: 150px;
    }

尽管它们的总宽度相互匹配，但它们的底部并没有与顶部相匹配。

每个

的边距为10px，边距为10px。

我正在使用重置样式表来删除浏览器设置。

我想不出任何不能让它正确对齐的东西。

Codepen

请帮忙。谢谢！

Answer 1

这是因为the white-space between inline block elements（在本例中为列表项）标签和HTML元素之间的新行被视为空格。

你可以使用CSS float或只删除空格，如下所示：

<强> EXAMPLE HERE

.main ul {
  font: 0/0 a; /* Set font-size and line-height to 0 for the container */
}

.main li {
  /* Then reset the valid value on list items */
  font: 18px/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* other declarations */
}

有几种方法可以删除内联（-block）元素之间的空格：

• 最小化HTML
• 负边距
• 评论白色空间
• 打破结束标记
• 将父级的字体大小设置为零，然后将其重置为子级
• 浮动内联项目
• 使用flexbox

您的选择。

Answer 2

那是因为你的瓷砖之间还有一个空间。 要解决此问题，请让您租用我的宽度315px。