关于页面元素的对齐方式,css高手请进
我想让一个div里面的文本框和一张图片上下都对齐，代码如下，百思不得其解为啥就偏了那么一点
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>页面布局</title><style type="text/css"> div{ margin:0; padding:0; height:26px; width:200px; border:1px solid #FF0000; } input{ margin:0; height:26px; width:100px; } img{ margin:0; height:26px; width:41px; border:1px solid #33FF00; }</style></head><body > <div> <input type="text" /> <img src="1.gif" /> </div></body></html>网页中所需图片为
[解决办法]
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>页面布局</title><style type="text/css"> div{ margin:0; padding:0; height:26px; width:200px; } input{ margin:0; height:26px; width:100px; float:left; } img{ margin:0; height:26px; width:41px; float:left; }</style></head><body > <div> <input type="text" /> <img src="1.gif" /> </div></body></html>
[解决办法]
div内元素都向左浮动，文本框、img有边框，所以height要小一点，height+上边框+下边框=26px。
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>页面布局</title><style type="text/css"> div{ margin:0; padding:0; height:26px; width:200px; border:1px solid #FF0000; } input{ float:left; margin:0; height:20px; width:100px; } img{ float:left; margin:0; height:24px; width:41px; border:1px solid #33FF00; }</style></head><body > <div> <input type="text" /> <img src="1.gif" /> </div></body></html>