Question

CSS中，input添加padding-left:30px后被推长的问题。

第一个input我加了一个长度提示，所以需要加padding-left。问题来了，框被推长，导致已其他框无法对齐（如图）。我又不能给它指定固定的宽度，以为我做了响应式页面，框需要随页面宽度变化。怎么解决？谢谢。-------------html：------------- <div id="xinjiandiv" class="neirongdiv"> <div id="xj_zhanghaodiv"><input type="text" id="xj_zhanghao" class="xj_text" maxlength="16" placeholder="账号" /><span id="xjzhtishi">0</span></div> </br> <input type="text" id="xj_miaoshu" class="xj_text" maxlength="120" placeholder="问题描述" onFocus="qcxjtishi()"/> </br> <input type="text" id="xj_beizhu" class="xj_text" maxlength="120" placeholder="备注" onFocus="qcxjtishi()"/> </br> </br> <input type="button" id="xj_btn" class="btnwhite" value="创建工单" onClick="xinjianyanzheng()"/> </br> </div>-------------CSS：-------------#xj_zhanghaodiv{position:relative;} .xj_text{ font-size:16px; color:#474747; border:1px #B8B8B8 solid; border-radius:3px; margin:5px 0 5px 0; height:26px; width:100%; max-width:640px; }#xj_zhanghao{ padding-left:30px; }#xjzhtishi{ color:#272727; background:#F4F4F4; border-right:1px solid #B8B8B8; border-radius:4px 0 0 4px; width:25px; padding:3.5px 0; text-align:center; font-weight:bold; position:absolute; left:1px; top:5.5px; }

Answer 1

最简单的解决办法就是不用padding-left，改用text-indent：
text-indent: 30px
（我上次回答你的问题时不就是这样的吗？你也不想想我为什么不用padding？）
原因：元素的实际宽度=width+border+padding，所以如果padding不为0，元素的实际宽度就会被拉宽了。而text-indent是段落前空位（就是写文章时每一段前面的空格），不会影响到元素的实际宽度。

Answer 2

因为padding是要占宽度的，所以你的宽度要相应的减少30px

追问

我又不能给它指定固定的宽度，以为我做了响应式页面，框需要随页面宽度变化。

怎么解决？谢谢。

我可以将它的max-width减少30，但问题在width100%这里，见下图：

追答

你只能在外面再套一层div，把padding-left:30px;单独给那个div，这样就不影响input了

Answer 3

你在input上面加上这个试试，我敲了这么久代码也是最近才发现有这个问题。。。这是让input的宽度等于内边距。
box-sizing: border-box;//其他浏览器
-webkit-box-sizing: border-box;//谷歌
-moz-box-sizing: border-box;//火狐