61,110
社区成员
发帖
与我相关
我的任务
分享
<!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>
<!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 设置上边框 可以实现你要的效果 */