html - 将 DOM 容器与外部容器等距对齐

问题描述

假设我有一个<ul>带有某个类样式的容器。

它的相关风格是

.resipes_filter .resipes_filter-dish {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}
*, ::after, ::before {
    box-sizing: border-box;
}

在其中，我们有<li>具有以下样式的项目：

display: inline-block;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 90px;
height: 90px;
border-radius: 10px;
border: 1px;

目前的情况是这样的。

我希望内部容器能够和谐而巧妙地对齐。这意味着彼此等距并且与外部容器的两侧（左侧和右侧）具有相同的边距。

一个人怎么能这样做呢？

PS 该项目正在滚动原始 CSS，所以像 SASS 或 LESS 这样的东西在这里并不是一个真正的选择。

标签： htmlcsscss-selectors

去年有很多关于 Flexbox 的兴奋 - 您已经发现了其中一个原因。

从 Bootstrap3 到 Bootstrap4 的主要核心变化是从浮动到 flexbox 是有原因的。浮动是放置物品的旧方法。flexbox（和 CSSGrid）是新的方式。Flexbox 非常简单。

根据您的问题，您最感兴趣的是：

justify-content: space-evenly;  (or perhaps "space-around")

Flexbox 需要两件事：

父容器（例如 DIV、section 、 aside 、p 等）display:flex;justify-content: space-around;
一个或多个子元素（例如 div、p、img 等）在这些元素上，放置：flex:1

资源：

这是一个出色的 20 分钟视频教程

html - 将 DOM 容器与外部容器等距对齐

问题描述

解决方案

推荐阅读