如何使input的宽度适应内容
2个回答
展开全部
<!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>
<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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
