英文:
Unnecessary indentation on the site in the line
问题
问题出现在移动版网站中,要么是在 flexbox 中,要么是在 svg 中,要么是在宽度上,我不太明白。开发工具显示 svg 中有缩进,文本本身也有缩进。
我需要在移动版网站上使这些行保持一致。使用小字体时一切正常。
英文:
The problem is in the mobile version of the site, either in flexbox, or in svg, or in width, which I don't understand. Devtools shows that there are indents from svg and the text itself has indents
I need the lines to be the same on the mobile version of the site. With a small font, everything is fine
答案1
得分: 0
根据代码,我理解你的 .icon
类有20vw的宽度,但你的 .desc
类没有指定任何宽度。
对于"Fast speed"部分,内容很小,可以适应较小的容器,但其他部分不行,因为它们都使用了display: flex
,即使你添加了20vw的宽度,也只有在有空间的地方才会应用,也就是"Fast speed"部分,其他的.icon
类的宽度小于20vw,因此出现了缩进。
解决方法之一是为.desc
类添加宽度属性,如下所示:
.desc {
width: 80vw;
}
另一种解决方法可以用于移动版本,如下所示:
.icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
/* width: 20vw; */
padding: 0px 15px;
}
英文:
what I understood from the code, your .icon class consists of width of 20vw, but your .desc class doesn't have any width.
Now for the section "Fast speed" the content is so small it able to fit itself in a smaller container but rest of them can't as these are all display flex, even though you have added 20vw, it is only getting applied where there is space which is "Fast speed", rest of the .icon class are smaller than 20vw. Hence it is appearing indented.
One solution could be to add width property to .desc class like
.desc {
width: 80vw;
}
Another solution could be in mobile version.
.icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
/* width: 20vw; */
padding: 0px 15px;
}
答案2
得分: 0
我会给你的.icon
CSS类添加一个max-width
和一点margin
。
我还建议将.desc
类中的height
替换为margin
以对齐所有内容。
.icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
max-width: 10vw;
margin: 0 10vw;
}
.desc {
display: flex;
flex-direction: column;
margin: auto 0;
}
英文:
I would add a max-width
and a little margin
to your .icon
css class.
I would also recommend ditching the height
in the .desc
class and replacing it with a margin
to line everything up.
.icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
max-width: 10vw;
margin: 0 10vw;
}
.desc {
display: flex;
flex-direction: column;
margin: auto 0;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论