今天在練習的時候遇到了一點小問題，稍作記錄希望下次遇到可以有點印象。
簡單說明一下就是要編寫乙個搜尋框，搜尋框分為兩塊，一塊是左邊的文字框s_text，一塊是右邊的搜尋按鈕s_button，具體的html**如下：
class
="searchbox"
>
class
="s_text"
type
="text"
value
="hotwords"
>
href
="#"
>
class
="s_button"
type
="button"
value
="搜尋"
>
a>
//此處文字框和按鈕兩個input沒有換行；
div>
再配以適當的css**：
*
.searchbox
.searchbox input.s_text
.searchbox a input.s_button
效果圖如下：
此時問題就已經出現了：input文字框往下偏移了一點點。
class
="searchbox"
>
class
="s_text"
type
="text"
value
="hotwords"
>
href
="#"
>
class
="s_button"
type
="button"
>
a>
//此處第二個input去掉了value值；
div>
效果圖如下：
問題似乎更大了：input文字框與input按鈕"看起來"完全不在一條水平線上。
出現這兩個問題的原因就在於input標籤的display屬性是inline-block，內聯塊級元素，和img等其他內聯元素一樣，他們在塊級元素中預設是水平排列，就會有乙個預設的vertical-align屬性，vertical-align預設值是baseline，也就是基線對齊。
沒有value值的按鈕基線是下邊框，而有value值的文字框的基線是文字底部。
所以我們仔細看，其實右邊的input按鈕的下邊框與左邊的input文字框中的文字是底部是對齊的：
那麼如何解決這兩個問題呢，有兩個很簡單的方法：
將input按鈕的vertical-align屬性值設定為middle或top；
.searchbox a input.s_button
input
HTML中的input標籤
input標籤的type取值 text 單行文字框 取值為 text value 預設值 size 長度 maxlength 最多可以輸入的字元數 password 密碼文字框 value 預設值 size 長度 maxlength 最多可以輸入的字元數 radio單選框 name表示所在的組名 v...
Html中input標籤的使用
1.取消按鈕按下時的虛線框 在input裡新增屬性值 hidefocus 或者 hidefocus true 2.唯讀文字框內容 在input裡新增屬性值 readonly 3.防止退後清空的text文件 可把style內容做做為類引用 4.enter鍵可以讓游標移到下乙個輸入框 5.只能為中文 有...
幾個html中input標籤的細節
今天在寫前台的時候遇到幾個問題，於是心血來潮去測試了一下 1.input type hidden 我們經常拿來寫一些不希望被看到的屬性，但是如果寫在form中是會被跟著表單一起提交出去的。那麼我就在想，如果給 hidden 加上disabled屬性是否還會跟著表單一起提交呢？比如 1 form ac...