html表单居上对齐,html – 如何在表单上布局文本和输入以适合特定宽度(对齐)？...

最新推荐文章于 2023-01-02 21:27:42 发布

转载最新推荐文章于 2023-01-02 21:27:42 发布 · 671 阅读

文章标签：

#html表单居上对齐

这篇博客讨论了CSS属性`text-align-last:justify`在处理块元素最后一行文本对齐的问题，特别是在IE和Firefox浏览器中的应用。文章指出，此属性在Chrome和Safari等基于Webkit的浏览器中可能不工作，并提供了一个解决方案，通过添加额外的CSS规则来确保在这些浏览器中正确对齐。此外，还提供了一个JSFiddle演示来展示效果。

您基本上需要

text-align-last: justify,它指定块元素中“最后一行文本”的对齐方式,默认为标准方向,保留在LTR中.

SO question 15994654

#fields {

width: 1000px;

border: 1px solid gray;

}

.justified {

text-align-last: justify;

}

label1

label2

label3

label4

这适用于IE和Firefox(对于较旧的Firefox版本,如有必要,请添加-moz-text-align-last：justify),但这在基于Webkit的浏览器(Chrome / Safari)中失败.为了覆盖这些浏览器,您需要将以下内容替换为.justified,以便最后一行不再显示为“最后一行”,因此text-align：justify可以通常的方式完成其工作：

.justified {

text-align: justify;

}

.justified:after {

content: '';

display: inline-block;

width: 100%;

}

请注意,text-align-last：justify以这种方式变得多余.

这是jsfiddle demo.