如何让input宽度自适应

 我来答

1个回答

#热议# 不吃早饭真的会得胆结石吗？

就烦条0o
2016-07-24 · 知道合伙人软件行家

就烦条0o
知道合伙人软件行家

采纳数：33315 获赞数：46492

从事多年系统运维，喜欢编写各种小程序和脚本。

向TA提问私信TA

关注

展开全部

<!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>


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起