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

我想让所有的图像在一行内的粉红色框内。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;
    }

将图像放在一条直线上，将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>

基本上你现在的容器宽度为700。

你想要3个.img-menu-list适合一行。让我们将宽度定义为33%。

另外，因为有一个display:inline-block，所以它们之间总是有空格。对抗行内块元素之间的空间。

我把display:inline-block改成了float:left。

所以我们以这样的结尾:

 .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;
        list-style: none;
    }
    .img-menu-list {
        float: left;
        margin: 0;
        padding: 0;
        width: 33.33%;
    }
    .img-menu-list a img {
        width: 100%;
        margin:0;
        padding:0;
    }

<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>

我建议重新设计HTML结构和应用于它的CSS。这里有一个稍作修改的版本供你考虑。这是根据您的示例将每个图像缩小到175px，但您可以根据需要将width更改为.img-menu-list和.img-menu。

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>

CSS

.sub {
    background: skyblue;
    width: 1000px;
    height: 199px;
    padding-top: 1px;
}
.menu {
    width: 250px;
    float: left;
    margin-right: 50px;
}
.menu li {
    float: left;
    width: 48%;
    background: blue;
    margin: 0 0 2% 2%;
}
.img-menu {
    width: 525px;  /* 175px * 3 */
    background: pink;
    float: left;
}
.img-ul {
    margin: 0;
    padding: 0;
    font-size: 0;
}
.img-menu-list {
    display: inline-block;
    width: 175px;
    margin: 0;
    padding: 0;
}
.img-menu-list a img {
    width: 100%;
    height: auto;
}

要使列表在单行上，必须为列表设置宽度。所以你需要根据图片的数量来设置宽度(100%/3 = 33,3…%)。

.img-menu-list {
    display: inline-block;
    margin: 0;
    padding: 0;
    width:33%;
}

但是这是不够的，因为li之间有多余的空白。

如何移除行内块元素之间的空格?
你会找到很多方法来解决这个问题。

快速地，只需关闭与下一个开始的同一行的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><li class="img-menu-list">
    <a href=""><img src="https://placehold.it/250x140" alt=""></a>
</li>

参见

你现在可以调整图像的宽度取决于你想要的结果-提琴

HTML

相关内容

最新更新

热门标签：