英文:
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 -->
<!-- skills -->
<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>
<!-- 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 -->
<!-- skills -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论