请问怎样实现一行内的多个input自动填满

satanxj 2010-01-28 08:43:33

<html>
<body>
<style>
#name {width:500px;}
</style>
<div id="name">
英文姓名<input type="text" />
中文姓名<input type="text" />
中文繁体<input type="text" />
</div>

</body>
</html>

假如div的宽度变化的时候，我希望三个input能在同一行上，并能自动填满div

...全文

803 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

happy19870903 2010-03-04

打赏
举报

zhanglzlkn 2010-02-08

打赏
举报

使用table控制可以做到自适应其他目前还没有遇到有自适应的html元素

mykelly6 2010-02-08

打赏
举报

引用 8 楼 shan1119 的回复:

HTML code<html><head><style>
#name{width:500px;background:#EEE;}
#name input{top:0px;
width:32.5%;}</style></head><body><divid="name"><inputtype="text"/><inputtype="text"/><inputtype="text"/></d?-

像这样div容器内的控件用百分比来控制应该没问题的

shan1119 2010-02-08

打赏
举报

<html> 

<head> 

<style> 

#name {width:500px;background:#EEE;} 

#name input{top:0px;

    width:32.5%;

}

</style>

</head>

<body> 

<div id="name"> 

<input type="text" /> 

<input type="text" /> 

<input type="text" /> 

</div> 

</body> 

</html>

KK3K2005 2010-02-07

打赏
举报

顶楼上的
这种拉伸布局用table是明智的

LifeChina555 2010-02-07

打赏
举报



expression只能在IE下用吧？

如果楼主不介意用table，可以试试

<html> 

<body> 

<style> 

#name {width:500px;} 

#name input{

 width:100%;

/*如果你不设置table的间距的话width:100%可能会撑破，这样的话你可以设置width:96% 之类稍少一点的值*/

}

</style> 

<table id="name"> 

  <tr>

    <td><input type="text" /></td>

    <td><input type="text" /></td> 

    <td><input type="text" /></td>

  </tr>

</table> 

</body> 

</html>

satanxj 2010-01-28

打赏
举报

[Quote=引用 1 楼 ymmc001 的回复:]
这样就可以了：
HTML code<html><body><style>
#name{width:500px;}
#name input{
width:expression(parseInt(document.getElementBy("name").style.width.replace("px",""),10)/3 + "px");}</style><divid="name"><inputtype="text"/><inputtype="text"/><inputtype="text"/></div></body></html>
[/Quote]

谢谢~ 但是好像没有效果啊。。

satanxj 2010-01-28

打赏
举报

[Quote=引用 2 楼 zuo_hy 的回复:]
你的div不是指定了固定长度吗？
根据固定长度来分。
[/Quote]

我的div长度是变化的。。这些input在一个可以伸缩长宽的图层中。

弘毅致远 2010-01-28

打赏
举报

你的div不是指定了固定长度吗？
根据固定长度来分。

Alien 2010-01-28

打赏
举报

这样就可以了：



<html> 

<body> 

<style> 

#name {width:500px;} 

#name input{

    width:expression(parseInt(document.getElementBy("name").style.width.replace("px",""),10)/3 + "px");

}

</style> 

<div id="name"> 

<input type="text" /> 

<input type="text" /> 

<input type="text" /> 

</div> 

</body> 

</html>