ul列表中包含input時line-height屬性失效的解決辦法_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
問題:為什么<UL>列表含<input>控件時,行高屬性在IE6.0下失效?FF2.0下正常。這是一個不常見的問題,我們不提倡這樣的布局方式,input元素盡可能的使用lable標簽而不是包含于ul的li標簽中。但在實際操作中,也可能存在這樣的情況,我們就ul列表中包含input時line-height屬性失效的問題作一些探討。
我們知道input標簽是一個block元素,也就是一個塊元素,而line-height只可以應用于inline行內元素。所以line-height屬性的設置對input元素是無效的。我們看下面的代碼:
代碼調試框 [www.ghpqjb.com]
[ 可先修改部分代碼 再運行查看效果 ]
CSS模板下載所在的li標簽及input元素,行高明顯的小于40px。因為input是block元素無line-height屬性可言。我們只能通過變通的方法來解決問題。
首先我們定義好input標簽的外觀,即他的寬度與高度。然后設置邊距,使其達到與其它li列表項同樣行高的視覺效果,而不是通過line-height屬性來實現。
我們定義input元素的邊框為一象素的灰色實線。寬度與高度分別是120px與20px。我們定義的li列表項的行高為40px。要使input元素如其它列表項一樣,則設置input元素的上下邊距為10px。即達到了行距為40px的效果。但這樣會造成“CSS模板下載”與input標簽水平不對齊,我們設置vertical-align:middle。使得文字與輸入框水平對齊。關于vertical-align:middle的相關知識,心細的你或許會發現,我們這里也設置了line-height屬性,值是20px。這里的line-height屬性設置是input輸入文字的行高,我們這樣設置,可以使輸入文字在輸入框垂直居中。
通過此例,我們應該注重區分不同的屬性所能作用的對象,line-height屬性是inline元素所擁有的,對于block元素是不起作用的。我們看最終的運行效果:
代碼調試框 [www.ghpqjb.com]
[ 可先修改部分代碼 再運行查看效果 ]
我們知道input標簽是一個block元素,也就是一個塊元素,而line-height只可以應用于inline行內元素。所以line-height屬性的設置對input元素是無效的。我們看下面的代碼:
代碼調試框 [www.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
CSS模板下載所在的li標簽及input元素,行高明顯的小于40px。因為input是block元素無line-height屬性可言。我們只能通過變通的方法來解決問題。
首先我們定義好input標簽的外觀,即他的寬度與高度。然后設置邊距,使其達到與其它li列表項同樣行高的視覺效果,而不是通過line-height屬性來實現。
示例代碼 [www.ghpqjb.com]
input {
border:1px solid #666;
width:120px;
height:20px;
margin:10px 0;
vertical-align:middle;
line-height:20px;
}
border:1px solid #666;
width:120px;
height:20px;
margin:10px 0;
vertical-align:middle;
line-height:20px;
}
我們定義input元素的邊框為一象素的灰色實線。寬度與高度分別是120px與20px。我們定義的li列表項的行高為40px。要使input元素如其它列表項一樣,則設置input元素的上下邊距為10px。即達到了行距為40px的效果。但這樣會造成“CSS模板下載”與input標簽水平不對齊,我們設置vertical-align:middle。使得文字與輸入框水平對齊。關于vertical-align:middle的相關知識,心細的你或許會發現,我們這里也設置了line-height屬性,值是20px。這里的line-height屬性設置是input輸入文字的行高,我們這樣設置,可以使輸入文字在輸入框垂直居中。
通過此例,我們應該注重區分不同的屬性所能作用的對象,line-height屬性是inline元素所擁有的,對于block元素是不起作用的。我們看最終的運行效果:
代碼調試框 [www.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
相關DIV+CSS實例:
- 相關鏈接:
- 教程說明:
DIV+CSS實例-ul列表中包含input時line-height屬性失效的解決辦法
。