表單文字兩端對齊

2022-05-29 05:12:11 字數 1801 閱讀 6446

1.在頁面布局的時候,只要有表單就存在這個對齊方式的應用。

1

doctype html

>

2<

html

>

3<

head

lang

="en"

>

4<

meta

charset

="utf-8"

>

5<

title

>文字2端對齊

title

>

6<

meta

content

="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

name

="viewport"

>

7<

style

type

="text/css"

>89

*10html,body

11ul

12.list

1617

.list li

2425

.list li .text

36.list li .text:after

44style

>

45head

>

46<

body

>

4748

<

ul class

="list"

>

49<

li>

50<

span

class

="text"

>銀 行 卡 號

span

>

51<

input

type

="text"

placeholder

="請輸入銀行卡號"

/>

52li

>

53<

li>

54<

span

class

="text"

>卡 號

span

>

55<

input

type

="text"

placeholder

="請輸入卡號"

/>

56li

>

57<

li>

58<

span

class

="text"

>電 話 號

span

>

59<

input

type

="text"

placeholder

="請輸入**號"

/>

60li

>

61<

li>

62<

span

class

="text"

>身 份 證 地 址

span

>

63<

input

type

="text"

placeholder

="請輸入身份證位址"

/>

64li

>

65ul

>

6667

body

>

68html

>

文字兩端對齊

學習貼 最近在工作專案中接觸到web介面設計的問題,要實現文字兩端對齊的效果。在網上搜尋了一下,用的都是類似的技巧 text align justify text justify inter ideograph 我遇到問題是 看不到效果,無論是英文還是中文,在ie和chrome下都不起作用。還好在s...

css text align文字兩端對齊

text align start end left right center justify match parent justify all justify 內容兩端對齊,但對於強制打斷的行 被打斷的這一行 及最後一行 包括僅有一行文字的情況,因為它既是第一行也是最後一行 不做處理。start 內...

文字兩端對齊text align justify

使用text align justify可以實行文字兩端對齊,但他在大段文字中使用效果較好。因為該屬性會自動忽略最後一行。由下面兩圖可以看出,加了justify屬性,文字會兩端對齊,除了最後一行,這也符合一般規範。未加text align justify 加了text align justify 但...