我应该在这个Css中做什么修改？

Question

为了得到正确的输出，我应该在下面的代码中更改什么？

我想要技能和子弹并肩作战，但这是最重要的。

我试着看不同的参考资料，但它更破坏了我的布局。

下面是我的HTML和CSS代码：

​

.skills__content,
.languages__content {
  grid-template-columns: repeat(2, 1fr);
}

.skills__content,
.experience__content {
  gap: 1;
}

.languages__content {
  gap: 0;
}

.skills__name,
.languages__name {
  display: flex;
  align-items: center;
  margin-bottom: var(--mb-3);
}

.skills__circle,
.languages__circle {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--text-color);
  border-radius: 50%;
  margin-right: 0.75rem;
}

<!-- Skills -->
<section class="skills section" id="skills">
  <h2 class="section-title">Skills</h2>
  <div class="skills__content bd-grid">
    <ul class="skills__data">
      <li class="skills__name">
        <span class="skills__circle">C </span>
      </li>
      <li class="skills__name">
        <span class="skills__circle">C++</span>
      </li>
      <li class="skills__name">
        <span class="skills__circle">Python</span>
      </li>
      <li class="skills__name">
        <span class="skills__circle">Java</span>
      </li>
      <li class="skills__name">
        <span class="skills__circle">Linux</span>
      </li>
    </ul>

    <ul class="skills__data">
      <li class="skills__name">
        <span class="skills__circle">Html</span>
      </li>
      <li class="skills__name">
        <span class="skills__circle">Css</span>
      </li>
      <li class="skills__name">
        <span class="skills__circle">Javascript</span>
      </li>
      <li class="skills__name">
        <span class="skills__circle">React.js</span>
      </li>
      <li class="skills__name">
        <span class="skills__circle">Firebase</span>
      </li>
    </ul>

    <ul class="skills__data">
      <li class="skills__name">
        <span class="skills__circle">MYSQL</span>
      </li>
      <li class="skills__name">
        <span class="skills__circle">Excel</span>
      </li>
    </ul>
  </div>
</section>

​

附上图片以供参考：

现在就是这样

​

​

这就是我想要的样子，

​

​

Answer 1

您也可以通过向<li>标记添加一些属性来做到这一点。以下是正确的实现。

还删除了一些不必要的样式。

​

ul {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    list-style: none;
    grid-row-gap: 20px;
}
li {
    display: flex;
    flex-direction: row;
}

.skills__name {
     align-items: center;
}
.skills__circle,
.languages__circle {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 5px;
  height: 5px;
  background-color: green;
  border-radius: 50%;
  margin-right: 5px;
}

 <section class="skills section" id="skills">
                <h2 class="section-title">Skills</h2>
                <div class="skills__content">
                    <ul class="skills__data">
                        <li class="skills__name">
                            <span class="skills__circle"> </span>C
                        </li>
                        <li class="skills__name">
                            <span class="skills__circle"></span>C++
                        </li>
                        <li class="skills__name">
                            <span class="skills__circle"></span>Python
                        </li>
                        <li class="skills__name">
                            <span class="skills__circle"></span>Java
                        </li>
                        <li class="skills__name">
                            <span class="skills__circle"></span>Linux
                        </li>
                    </ul>

                    <ul class="skills__data">
                        <li class="skills__name">
                            <span class="skills__circle"></span>Html
                        </li>
                        <li class="skills__name">
                            <span class="skills__circle"></span>Css
                        </li>
                        <li class="skills__name">
                            <span class="skills__circle"></span>Javascript
                        </li>
                        <li class="skills__name">
                            <span class="skills__circle"></span>React.js
                        </li>
                        <li class="skills__name">
                            <span class="skills__circle"></span>Firebase
                        </li>
                    </ul>

                    <ul class="skills__data">
                        <li class="skills__name">
                            <span class="skills__circle"></span>MYSQL
                        </li>
                        <li class="skills__name">
                            <span class="skills__circle"></span>Excel
                        </li>                          
                    </ul>
                </div>
            </section>

​