如何使用 HTML/CSS 在作品集中创建技能部分？

Question

我似乎无法弄清楚如何在每种语言名称（div）周围放置方框，并在每个语言名称周围放置方框以将它们均匀分布。这些颜色目前仅用于视觉目的。

我尝试使用 justify-content: center;但它没有做任何事情。我唯一的猜测是我没有看到的父子属性可能存在问题。

Answer 1

在绿色 div 内，您可以为要均匀分布的子元素创建多个 div 并添加以下类：

.separate-evenly{
display:grid;
grid-template-columns: repeat(5,1fr);
}

     <div class="separate-evenly">
        <p>Javascript</p>
        <p>Python</p>
        <p>Java</p>
        <p>HTML5</p>
        <p>CSS3</p>
      </div>

这将为每个子元素提供 1 部分空间，以便每个子元素都具有相同的宽度。

此外，您可以使用 Flexbox 来实现此目的，如下所示：

.separate-evenly{
display: flex;
justify-content: space-between
}

     <div class="separate-evenly">
            <p>Javascript</p>
            <p>Python</p>
            <p>Java</p>
            <p>HTML5</p>
            <p>CSS3</p>
          </div>

希望有帮助！