css表單對齊解決方案

2021-08-25 13:26:29 字數 1661 閱讀 6287

表單的樣式一直是前端所重視的,也是最難解決的,每個人的解決方法不懂,今天在網上看到這個方法,很不錯,大家可以試試,運用到了display:inline-block這個屬性。

.sd-form-list/*這裡使用tahoma字型使表單對齊*/

.sd-form-list .form-position-right

.sd-form-list .sd-form-txt

.sd-form-list .row/*每行間距*/

.sd-form-list input

.sd-form-list .sd-form-label/*width控制左列寬,text-align設定對齊方式*/

.sd-form-list label.vt

.sd-form-list label.vb

.sd-form-list .sd-form-label em

.sd-form-list .collection

.sd-form-list .rc

.sd-form-list .rc input

.sd-form-list select

.sd-form-list .sd-textarea

.sd-form-list span.sd-mark

.sd-form-list p.sd-mark

.sd-form-list .sd-form-file

.sd-form-list .sd-form-btn

編輯 | 刪除

純文字:

這裡是文字

純字母:

1234567890

*單行文字框:

表單驗證

密碼文字框:

單選框:

專案1專案2

多選框:

專案1專案2

下拉列表:

選項1 選項2

選項3文字域:

表單驗證

上傳控制項:

label居中:

label居底:

解決:缺點:暫不支援14px字型

回車提交表單解決方案

1 首先我們來實現一按回車就自動提交表單的功能 這個其實比較容易,只要表單中含有乙個 提交 的按鈕,在文字框中輸入內容後按回車就會自動提交這個表單,如果不想讓提交按鈕出現在頁面上,可以這樣寫,按鈕同樣有效,只是被隱藏了 view plainprint?另外如果表單中只有乙個文字框,沒有提交按鈕,也會...

css布局解決方案

總結css布局 1 水平布局 1 display inline block text algin center a 原理 用法 原理 先將子框由塊級元素變為行內元素,再通過設定行內元素居中以到水平居中 用法 對子框設定display inline block,對父元素設定text algin cen...

CSS布局解決方案

使用inline block text align en parent child dome 複製 效果 3.使用absolute transform en parent child dome 複製 效果 4.使用flex margin en parent child dome 複製 效果 5.使用...