HTML CSS在类别skills_group中的对齐

huangapple
go评论61阅读模式
英文:

HTML CSS Alignment in class skills_group

问题

下面是已翻译的代码部分：

<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->

<!-- 语言：lang-css -->
/*=============== 技能 ===============*/
.skills__content{
  row-gap: 3.5rem;
}

.skills__title{
  font-size: var(--h3-font-size);
  text-align: center;
  margin-bottom: 1.5rem;
}

.skills__box{
  display: flex;
  justify-content: center;
  column-gap: 3rem
}

.skills__group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: flex-start;
  row-gap: 1rem;
}

.skills__data{
  display: flex;
  column-gap: .5rem;
}

.skills__data i{
  font-size: 1rem;
  color: var(--first-color);
}

.skills__name{
  font-size: var(--normal-font-size);
  font-weight: 500;
  line-height: .5rem;
}

.skills__level{
  font-size: var(--smaller-font-size);
}

<!-- 语言：lang-html -->
<!-- 技能 -->
      <div class="skills__content grid" data-content id="skills">

          <div class="skills_area">
              <h3 class="skills_title">
                  Desenvolvedor Frontend
              </h3>

              <div class="skills__box">
                  <div class="skills__group">
                      <div class="skills__data">
                          <i class="uil uil-check"></i>

                          <div>
                              <h3 class="skills__name">HTML</h3>
                              <span class="skills__level">Intermediário</span>
                          </div>
                      </div>

                      <div class="skills__data">
                          <i class="uil uil-check"></i>

                          <div>
                              <h3 class="skills__name">JavaScript</h3>
                              <span class="skills__level">Avançado</span>
                          </div>
                      </div>
                      <div class="skills__group">

                          <div class="skills__data">
                              <i class="uil uil-check"></i>

                              <div>
                                  <h3 class="skills__name">Bootstrap</h3>
                                  <span class="skills__level">Avançado</span>
                              </div>
                          </div>
                      </div>
                      <div class="skills__data">
                          <i class="uil uil-check"></i>

                          <div>
                              <h3 class="skills__name">CSS</h3>
                              <span class="skills__level">Intermediário</span>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

          <div class="skills_area">
              <h3 class="skills_title">
                  Desenvolvedor Mobile
              </h3>

              <div class="skills__box">
                  <div class="skills__group">
                      <div class="skills__data">
                          <i class="uil uil-check"></i>

                          <div>
                              <h3 class="skills__name">Swift</h3>
                              <span class="skills__level">Avançado</span>
                          </div>
                      </div>

                      <div class="skills__data">
                          <i class="uil uil-check"></i>

                          <div>
                              <h3 class="skills__name">Storyboard</h3>
                              <span class="skills__level">Avançado</span>
                          </div>
                      </div>
                      <div class="skills__group">

                          <div class="skills__data">
                              <i class="uil uil-check"></i>

                              <div>
                                  <h3 class="skills__name">SwiftUI</h3>
                                  <span class="skills__level">Intermediário</span>
                              </div>
                          </div>
                      </div>
                      <div class="skills__data">
                          <i class="uil uil-check"></i>

                          <div>
                              <h3 class="skills__name">Kotlin</h3>
                              <span class="skills__level">Intermediário</span>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

          <div class="skills_area">
              <h3 class="skills_title">
                  Extras
              </h3>

              <div class="skills__box">
                  <div class="skills__group">
                      <div class="skills__data">
                          <i class="uil uil-check"></i>

                          <div>
                              <h3 class="skills__name">Inglês</h3>
                              <span class="skills__level">Avançado</span>
                          </div>
                      </div>

                      <div class="skills__data">
                          <i class="uil uil-check"></i>

                          <div>
                              <h3 class="skills__name">MySQL</h3>
                              <span class="skills__level">Avançado</span>
                          </div>
                      </div>
                      <div class="skills__group">

                          <div class="skills__data">
                              <i class="uil uil-check"></i>

                              <div>
                                  <h3 class="skills__name">Python</h3>
                                  <span class="skills__level">Avançado</span>
                              </div>
                          </div>
                      </div>
                      <div class="skills__data">
                          <i class="uil uil-check"></i>

                          <div>
                              <h3 class="skills__name">Design Thinking</h3>
                              <span class="skills__level">Intermediário</span>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
<!-- 结束代码片段 -->

这是您提供的代码的中文翻译，已删除注释和其他不必要的内容。

英文:

Need help aligning those sections:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/*=============== SKILLS ===============*/
.skills__content{
row-gap: 3.5rem;
}
.skills__title{
font-size: var(--h3-font-size);
text-align: center;
margin-bottom: 1.5rem;
}
.skills__box{
display: flex;
justify-content: center;
column-gap: 3rem
}
.skills__group {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: flex-start;
row-gap: 1rem;
}
.skills__data{
display: flex;
column-gap: .5rem;
}
.skills__data i{
font-size: 1rem;
color: var(--first-color);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: 500;
line-height: .5rem;
}
.skills__level{
font-size: var(--smaller-font-size);
}

<!-- language: lang-html -->

&lt;!-- skills --&gt;
&lt;div class=&quot;skills__content grid&quot; data-content id=&quot;skills&quot;&gt;
&lt;div class=&quot;skills_area&quot;&gt;
&lt;h3 class=&quot;skills_title&quot;&gt;
Desenvolvedor Frontend
&lt;/h3&gt;
&lt;div class=&quot;skills__box&quot;&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;HTML&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;JavaScript&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Bootstrap&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;CSS&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills_area&quot;&gt;
&lt;h3 class=&quot;skills_title&quot;&gt;
Desenvolvedor Mobile
&lt;/h3&gt;
&lt;div class=&quot;skills__box&quot;&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Swift&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Storyboard&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;SwiftUI&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Kotlin&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills_area&quot;&gt;
&lt;h3 class=&quot;skills_title&quot;&gt;
Extras
&lt;/h3&gt;
&lt;div class=&quot;skills__box&quot;&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Ingl&#234;s&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;MySQL&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Python&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Design Thinking&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

So far it looks like this, I've tried everything but it seems like its dependent on the text length from the skills_data and skills_name. whenever i change it i change the formatting on the website, so it looks terrible. I've spend a lot of time trying to make it 2 columns of 2 names, and when i could do it this second bug happened.

答案1

得分: 1

编辑了“.skills__group”类，添加了“width: 55%;”以标准化项目的宽度，并编辑了“.skills__box”类，添加了“margin-left: 20%;”并编辑了“justify-content: left;”。

/*=============== 技能 ===============*/

.skills__content{
  row-gap: 3.5rem;
}

.skills__title{
  font-size: var(--h3-font-size);
  text-align: center;
  margin-bottom: 1.5rem;
}

.skills__box{
  display: flex;
  justify-content: left;
  column-gap: 3rem;
  margin-left: 20%;
}

.skills__group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: flex-start;
  row-gap: 1rem;
  width: 55%;
}

.skills__data{
  display: flex;
  column-gap: .5rem;
}

.skills__data i{
  font-size: 1rem;
  color: var(--first-color);
}

.skills__name{
  font-size: var(--normal-font-size);
  font-weight: 500;
  line-height: .5rem;
}

.skills__level{
  font-size: var(--smaller-font-size);
}

<!-- 技能 -->
<div class="skills__content grid" data-content id="skills">

    <div class="skills_area">
        <h3 class="skills_title">
            Desenvolvedor Frontend
        </h3>

        <div class="skills__box">
            <div class="skills__group">
                <!-- ...（其他部分未变） -->
            </div>
        </div>
    </div>

    <!-- ...（其他部分未变） -->

</div>
英文:

edited the class ".skills__group", added "width: 55%;" to standardize the width of the items and edited the ".skills__box" class, added "margin-left: 20%;" and edited "justify-content: left;"

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

/*=============== SKILLS ===============*/
.skills__content{
row-gap: 3.5rem;
}
.skills__title{
font-size: var(--h3-font-size);
text-align: center;
margin-bottom: 1.5rem;
}
.skills__box{
display: flex;
justify-content: left;
column-gap: 3rem;
margin-left: 20%;
}
.skills__group {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: flex-start;
row-gap: 1rem;
width: 55%;
}
.skills__data{
display: flex;
column-gap: .5rem;
}
.skills__data i{
font-size: 1rem;
color: var(--first-color);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: 500;
line-height: .5rem;
}
.skills__level{
font-size: var(--smaller-font-size);
}

<!-- language: lang-html -->

&lt;!-- skills --&gt;
&lt;div class=&quot;skills__content grid&quot; data-content id=&quot;skills&quot;&gt;
&lt;div class=&quot;skills_area&quot;&gt;
&lt;h3 class=&quot;skills_title&quot;&gt;
Desenvolvedor Frontend
&lt;/h3&gt;
&lt;div class=&quot;skills__box&quot;&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;HTML&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;JavaScript&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Bootstrap&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;CSS&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills_area&quot;&gt;
&lt;h3 class=&quot;skills_title&quot;&gt;
Desenvolvedor Mobile
&lt;/h3&gt;
&lt;div class=&quot;skills__box&quot;&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Swift&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Storyboard&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;SwiftUI&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Kotlin&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills_area&quot;&gt;
&lt;h3 class=&quot;skills_title&quot;&gt;
Extras
&lt;/h3&gt;
&lt;div class=&quot;skills__box&quot;&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Ingl&#234;s&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;MySQL&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__group&quot;&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Python&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Avan&#231;ado&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skills__data&quot;&gt;
&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;
&lt;div&gt;
&lt;h3 class=&quot;skills__name&quot;&gt;Design Thinking&lt;/h3&gt;
&lt;span class=&quot;skills__level&quot;&gt;Intermedi&#225;rio&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月18日 08:13:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/75490317.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定