如何让input宽度自适应?

mingfish2 2010-12-12 04:14:07
如何让input宽度自适应?

demo:http://linjuming.zy1668.com/my_question/input_width/input_width.htm
对于input高度和宽度css一直都觉得恶心,到底怎么控制?


<!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>
<title>input width</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<style type="text/css">
.box{width:300px;height:200px;background-color:tan;padding-top:50px;}
.box div{height:30px;background-color:green;padding-top:5px;}
.box div input{width:100%;padding:0 5px;}
</style>
<div class="box pdr20">
<div>
<input type="text" name="" />
</div>
</div>
</body>
</html>



...全文
16218 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
mingfish2 2010-12-12
  • 打赏
  • 举报
回复
谢谢星爷,哪个input 的左右padding我还是想要的,用95%宽好了。你说的那个套div的方法很好,就是多了层皮,显得累赘。
xtgopl 2010-12-12
  • 打赏
  • 举报
回复
哦 还有, IE 6 input 边框为1像素, Ie 7 8 9 都是2px
在IE 6 中,你应该是减去 input 的 padding-right: 1px就行
试试吧 这样方法可以设置 input 为 100%
xtgopl 2010-12-12
  • 打赏
  • 举报
回复
IE 6 7 8 FF 通过
xtgopl 2010-12-12
  • 打赏
  • 举报
回复

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"><html>

<head>

<style type="text/css">
[code=CSS]
#box {
margin: 50px auto; padding-top: 50px; background: Tan;
width:300px; height: 150px;
}

#box div{
padding-top: 5px;

padding-right: 2px; /* 多加了这行代码 */
overflow-x: hidden; overflow-y: hidden; /* 这个加不加都行 */

height: 30px; background-color: #06f;
}

#box input{
width: 100%; margin: 0; padding: 0; background-color: yellow;
border: 1px solid red;
}
/****** 这是我的几种方法,你试试,想用哪种用哪种 (好处:简单,不需要任何 script 代码)******/

/* 问题出在了 input 的边框问题 ,默认有 border-style: inset 边框 2 象素 */
/* 在包含 input 的 div 中 可以加上面代码 padding-right 减去边框就行 */
/* 如果不需要太长的 input , 可以设置 input 宽度为 99% */
/* 也可以不加任何代码,但需要把input 边框去掉 如:border: none; */
/* 去掉边框后 在 input 的外面套一个 div ,把div 设置上边框 可以实现你要的效果 */

</style>


</head>

<body onload="showWidth()">
>

<div id="box">

<div> <input type="text" name="" style="" /> </div>

</div><!--END BOX--></body>
</html>

[/code]


dalmeeme 2010-12-12
  • 打赏
  • 举报
回复
或者把width改成95%。
dalmeeme 2010-12-12
  • 打赏
  • 举报
回复
你设置input的width=100%,再加上padding,总宽度超过了100%了。
input外面的那个容器加上overflow:hidden;即可。

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧