css - 图像占据了两个图像之间不必要的填充和边距或空间

Question

我希望 .img-menu 内的粉红色框内的所有图像都在一行中，但即使边距和填充为 0，第三张图像也会低于。额外空间的原因是什么？另外，我希望粉红色框 (.img-menu) 与列表项正确对齐。 JSfiddle-https://jsfiddle.net/zLuw50h4/

---

HTML

<div class="sub">
    <div class="sub-menu">
        <ul class="menu">
                <h3>Header</h3>

            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
        </ul>
    </div>
    <div class="img-menu">
        <ul class="img-ul">
            <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
            </li>
            <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
            </li>
            <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
            </li>
        </ul>
    </div>
</div>

---

CSS

    .sub {
        position: absolute;
        background: skyblue;
        width: 1000px;
        height: 200px;
    }
    .sub-menu {
        width: 250px;
    }
    .sub-menu li {
        float: left;
        width: 48%;
        background: blue;
        margin: 0 0 2% 2%;
    }
    .img-menu {
        width: 700px;
        background: pink;
        float: right;
        margin: 0;
        padding: 0;
    }
    .img-ul {
        margin: 0;
        padding: 0;
    }
    .img-menu-list {
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    .img-menu-list a img {
        width: 70%;
        margin:0;
        padding:0;
    }

Answer 1

要将图像排成一条直线，请将 width/max-width 添加到每个 li 而不是每个 img，例如

.img-menu-list {
    display: inline-block;
    max-width: 175px;  /* same as 70% of 250px */
    margin: 0;
    padding: 0;
}
.img-menu-list a img { }

如果您希望图像列表位于文本菜单项旁边，那么我建议更改您的 HTML 结构，例如

<div class="sub">
    <div class="sub-menu">
        <h3>Header</h3>
        <ul class="menu">
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
        </ul>
        <div class="img-menu">
            <ul class="img-ul">
                <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
                </li>
                <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
                </li>
                <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
                </li>
            </ul>
        </div>
    </div>
</div>