在该行中网站上存在不必要的缩进。

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

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

The site itself

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;
}

huangapple
  • 本文由 发表于 2023年6月13日 01:17:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/76458935.html
匿名

发表评论

匿名网友

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

确定