您的位置：首页 > Web前端 > CSS

CSS行内(inline)元素同行放置时，垂直对齐差异

2013-03-14 15:33 323 查看

以下代码在不同浏览器中呈现不同样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.logo{display:block;width:54px;height:153px;background:url(http://ww1.sinaimg.cn/square/76591c14gw1e2p567sqqaj.jpg);float:left;}
.input{display:block;height:150px;float:left;}
.btn{display:block;height:150px; float:left;}
.tips{display:block;height:150px;background:#cccccc;float:left;}
</style>
</head>
<body>
<div class="row">
<span  class="logo"></span>
<input class="input" value="测试数据" /><button class="btn">确定</button><span class="tips">提示内容</span>
</div>
</body>
</html>

解决办法：全部加上float：left,显出垂直对齐差异，目前只想到这种办法，各位如有高见，还望指正。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航