Skip to content

Instantly share code, notes, and snippets.

@wenjul

wenjul/fluid-input.html

Created November 27, 2012 16:29
Show Gist options
  • Save wenjul/4155267 to your computer and use it in GitHub Desktop.
Save wenjul/4155267 to your computer and use it in GitHub Desktop.
Download ZIP
宽度自适应的输入框
Raw
fluid-input.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>宽度自适应的输入框</title>
<link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css" />
<style type="text/css">
.col{margin:0 auto; padding:10px; width:600px; background-color:#999;}
.fluid-input{display:inline-block; width:100%; _overflow:hidden;}
.fluid-input-inner{display:block; padding-right:10px; #zoom:1;}
.fluid-input .text,
.fluid-input textarea{padding:3px; width:100%; border:2px #ccc solid;}
.fluid-input textarea{height:300px;}
</style>
</head>
<body>
<div class="col">
<b class="fluid-input"><b class="fluid-input-inner"><input class="text" type="text"></b></b>
<b class="fluid-input"><b class="fluid-input-inner"><textarea></textarea></b></b>
</div>
</body>
</html>
@s-xiaoxiao
Copy link

宽度自适应，不是应该随着字的多少变宽吗？运行了一下 你这没变化。。。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment