这可能是一个愚蠢的问题,但它一直困扰着我。 我制作了 4 个框,每个框的文本应该从同一行开始,但有时(当文本较少时),它会从底部开始。
这是显示它的图像:
理想情况下,它应该从顶部开始一直到底部。像这样:
我应该对 CSS 代码进行哪些更改?
CSS:-
.show-text {
margin-left: 264px;
float: left;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-2 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-3 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-4 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
我的 JSFiddle:- http://jsfiddle.net/xa0obvyr/
最佳答案
因为您使用的是inline-block
,所以如果默认值不适合您,您需要指定垂直对齐方式。在这种情况下,您需要
show-text-col-4 {vertical-align: top;}
但是,您的设置并不理想。与其第一次使用较大的左边距 float ,我建议您改为使用居中的包装元素,并以相同的方式设置每一列的样式。
关于html - CSS 文本从错误的地方开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25521392/