Question

我希望粉红色框内的单行中的所有图像都位于.img-menu内，但即使边距，填充为0，第3个图像也会下方。额外空间的原因是什么？此外，我希望粉红色框（.img菜单）与列表项正确对齐。 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>

Answer 2

基本上，您目前的容器宽度为700。

您希望3 .img-menu-list适合一行。让我们将宽度定义为33%。

另外，因为有display:inline-block，所以它们之间总会有空格。 Fighting the space between inline-block elements

我将display:inline-block更改为float:left。

所以我们以这样的结局结束：

＆＃13;

 .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;
    }

＆＃13;

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

＆＃13;

Answer 3

我建议重新编写HTML结构和应用于它的CSS。这是一个稍微修改过的版本供您考虑。根据您的示例，这会将每个图片缩小到175像素，但您可以根据需要更改width和.img-menu-list的{{1}}。

HTML

.img-menu

CSS

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

Answer 4

要使列表在一行上，您必须为LI设置宽度。因此，您需要根据图像数量设置宽度（100％/ 3 = 33,3 ...％）。

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

但由于LI之间存在不必要的空白，因此不应该这样做。

How to remove the space between inline-block elements?

你会找到很多方法来解决这个问题。

很快，只需在下一个打开的那一行的同一行关闭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>

See the Fiddle

您现在可以根据所需的结果调整图像宽度 - Fiddle

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

4 个答案:

HTML

CSS