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元素是無效的。我們看下面的代碼：
代碼調試框 [m.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元素是不起作用的。我們看最終的運行效果：
代碼調試框 [m.ghpqjb.com]
[ 可先修改部分代碼 再運行查看效果 ]
我們知道input標簽是一個block元素，也就是一個塊元素，而line-height只可以應用于inline行內元素。所以line-height屬性的設置對input元素是無效的。我們看下面的代碼：
代碼調試框 [m.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
CSS模板下載所在的li標簽及input元素，行高明顯的小于40px。因為input是block元素無line-height屬性可言。我們只能通過變通的方法來解決問題。
首先我們定義好input標簽的外觀，即他的寬度與高度。然后設置邊距，使其達到與其它li列表項同樣行高的視覺效果，而不是通過line-height屬性來實現。
示例代碼 [m.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元素是不起作用的。我們看最終的運行效果：
代碼調試框 [m.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
相關DIV+CSS實例：
- 相關鏈接：
- 教程說明：
DIV+CSS實例-ul列表中包含input時line-height屬性失效的解決辦法
。