表单文字对齐 移动端常见表单两端对齐

效果：

首行：

第三行：

1.使用伪类 transform

.border_bottom { overflow: hidden; position: relative; border: none!important; } .border_bottom:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #d4d6d7; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }

2.使用 box-shadow 模拟

.border_bottom { box-shadow: inset 0px -1px 1px -1px #d4d6d7; }

有个缺点也就是细线颜色会变浅。

3.对不同 dpr （设备像素比）识别处理

.min-device-pixel-ratio(@scale2, @scale3) { @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) { transform: @scale2; } @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) { transform: @scale3; } } .border-1px(@color: #DDD, @radius: 2PX, @style: solid) { &::before { content: ""; pointer-events: none; display: block; position: absolute; left: 0; top: 0; transform-origin: 0 0; border: 1PX @style @color; border-radius: @radius; box-sizing: border-box; width: 100%; height: 100%; @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) { width: 200%; height: 200%; border-radius: @radius * 2; transform: scale(.5); } @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) { width: 300%; height: 300%; border-radius: @radius * 3; transform: scale(.33); } } } .border-top-1px(@color: #DDD, @style: solid) { &::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; border-top: 1Px @style @color; transform-origin: 0 0; .min-device-pixel-ratio(scaleY(.5), scaleY(.33)); } }