如何让input宽度自适应？

2010-12-12 04:14:07 1.6万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

STM32/GD32以太网开发避坑指南：ZLG EPORTM模块调试实战（含YT8512H配置）本文针对STM32/GD32平台使用ZLG EPORTM模块进行以太网开发时遇到的常见问题，提供了详细的调试实战指南。重点解析了从传统PHY驱动迁移到YT8512H芯片的核心步骤，包括软件复位延时、RMII时钟配置等关键陷阱，并分享了LWIP集成与稳定性验证的实用经验，帮助开发者高效避坑。阅读详情

如何让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>

...全文

手把手教你用GD32F407VET6的EXMC驱动外部SRAM，搞定大内存需求本文详细介绍了如何使用GD32F407VET6的EXMC外设驱动外部SRAM，解决嵌入式开发中的大内存需求问题。通过硬件连接方案、EXMC时序配置与初始化步骤，以及软件集成与内存管理技巧，帮助开发者快速实现内存扩展。特别适合需要处理图形显示缓冲、音频处理等大内存场景的GD32F407开发者。阅读详情

mingfish2

CSS 61,117 成员 60,701 内容

+ 关注 + 加入社区

切换为时间正序

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></body>
</html>

[/code]

dalmeeme 2010-12-12

打赏
举报

或者把width改成95%。

dalmeeme 2010-12-12

打赏
举报

你设置input的width=100%，再加上padding，总宽度超过了100%了。
input外面的那个容器加上overflow:hidden;即可。

如何让input宽度自适应？

相关推荐