以特定方式在其中共享一行的内容

编程问答 2022-06-01

问题描述

我想在其中共享一行的内容，但使用任何 flexBoxe 的 justify-content 命令：center、space-between、space-around、space-evenly 都没有我想要的结果。>

这是我得到的结果： enter image description here

我想要的是完全一样但在行内共享相等（如您所见，右端有一些额外的空间）。就像我说的，使用 space arround 之类的命令会产生这样的结果改变方式我希望内容出现在第二个“行”中。 enter image description here

你能帮我吗？ 这是我的 html 代码：

<div class="container menu-images">
            <div class="row lineup">
                <div class="menu-img-div col-auto">
                    <a href="Publications.html">
                        <img src="Images/menu/Posts.jpg" class="menu-img" alt="Posts HPV">
                        <p>ΔΗΜΟΣΙΕΥΣΕΙΣ</p>
                    </a>
                </div>
                <div class="menu-img-div col-auto">
                    <a href="Videos.html">
                        <img src="Images/menu/videos.jpg" class="menu-img" alt="videos HPV">
                        <p>VIDEOS</p>
                    </a>
                </div>
                <div class="menu-img-div col-auto">
                    <a href="information.html">
                        <img src="Images/menu/Cheatsheet-Frame.jpg" class="menu-img" alt="Cheatsheet-Frame HPV">
                        <p>ΠΛΗΡΟΦΟΡΙΕΣ ΜΕ <br> ΜΙΑ ΜΑΤΙΑ</p>
                    </a>
                </div>
                <div class="menu-img-div col-auto">
                    <a href="Poster.html">
                        <img src="Images/menu/poster.jpg" class="menu-img" alt="poster HPV">
                        <p>POSTER</p>
                    </a>
                </div>
                <div class="menu-img-div col-auto">
                    <a href="Questions.html">
                        <img src="Images/menu/Συχνές-ερωτήσεις-Frame.jpg" class="menu-img" alt="Συχνές-ερωτήσεις HPV">
                        <p>ΣΥΧΝΕΣ ΕΡΩΤΗΣΕΙΣ</p>
                    </a>
                </div>
            </div>
        </div>

还有我的 css：

.menu-img-div {
    display: inline-block;
}
@media screen and (min-width: 857px) and (max-width: 1116px) {
    .menu-images {
        max-width: 840px;
    }

    .lineup {
       justify-content: space-between;
    }
}

正如我所说的使用空格等命令

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

flexboxflexboxjustify