如何让编辑框的宽度自动适应？

myy 2005-06-10 11:14:21
<table bgcolor="#ECE9D8">
<tr>
<td width="300">
<input id="edt" type="text" value="cdcdcd" style="width: 100%;" />
<input id="btn1" type="button" value="ssss" onclick="ins();" />
<input id="btn2" type="button" value="rrrr" onclick="ins();" />
</td>
</tr>
</table>

这样一个简单的表格中，上面的 td 宽度为 300 ，
我想让edt、btn1、btn2在 td 内在一行上，edt自动撑满，
并且把btn1、btn2 “挤到”居右（不能换行），
能否通过设置style实现？并且我如果改动 td 的宽度，还能自动保持这种效果。
...全文
237 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
JK_10000 2005-07-05
  • 打赏
  • 举报
 回复

<table bgcolor="#ECE9D8">
<tr>
<td width="300" nowrap align=right >
<input id="edt" type="text" value="cdcdcd" style="width:expression(this.nextSibling.nextSibling.offsetLeft-10);" />
<input id="btn1" type="button" value="ssss" />
<input id="btn1" type="button" value="ssss" />
<input id="btn2" type="button" value="rrrr" />
</td>
</tr>
</table>
JK_10000 2005-07-05
  • 打赏
  • 举报
 回复
<table bgcolor="#ECE9D8" width="300">
<tr>
<td width=100% nowrap >
<input id="edt" type="text" value="cdcdcd" style="width: 100%;" />
</td>
<td nowrap >
<input id="btn1" type="button" value="ssss" onclick="ins();" />
<input id="btn2" type="button" value="rrrr" onclick="ins();" />
</td>
</tr>
</table>
myy 2005-07-04
  • 打赏
  • 举报
 回复
to valley74:

嘿嘿，不是我不厚道，你写的代码确实可以解决问题，
不过我是问“能否通过设置style实现？”，table中套table容易解决，
不用呢？就象我上面说的
<table bgcolor="#ECE9D8">
<tr>
<td width="300">
<input id="fileup" type="file" value="" style="width: 100%;" />
</td>
</tr>
</table>
这个例子（后面的“浏览”按钮不会换行）。


不过还是十分感谢你以及各位的热心回复。
valley74 2005-07-04
  • 打赏
  • 举报
 回复
楼主不厚道，问题不是给解决了么？
valley74 2005-06-13
  • 打赏
  • 举报
 回复
晕啊！灵活运用表格啊？不要告诉我无法限制外围表格宽度啊。

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language=javascript>
function resize_textbox(){
var obj;
for(i=0;i<document.myform.elements.length;i++){
obj = document.myform.elements[i];
if (obj.type=="text"){
obj.style.width="100%";
}
}
}
</script>

</head>

<body onresize="javascript:resize_textbox()" onload="javascript:resize_textbox()">

<form name=myform action="">
<table border="1" width="100%">
<tr>
<td width="134">姓名</td>
<td>
<table width=100% border=0>
<tr>
<td><input type="text" name="T1" size="20"></td>
<td width=40><input type=button value='啊呀'></td>
<td width=40><input type=button value='啊呀'></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="134">职业</td>
<td>
<table width=100% border=0>
<tr>
<td><input type="text" name="T2" size="20"></td>
<td width=20><input type=button value='啊'></td>
<td width=40><input type=button value='啊呀'></td>
<td width=60><input type=button value='啊呀呀'></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="134">毕业学校</td>
<td>
<table width=100% border=0>
<tr>
<td><input type="text" name="T2" size="20"></td>
<td width=20><input type=button value='啊'></td>
<td width=40><input type=button value='啊呀'></td>
<td width=60><input type=button value='啊呀呀'></td>
<td width=80><input type=button value='啊呀呀呀'></td>
</tr>
</table>
</td>
</tr>
</table>
</form>

</body>

</html>

这总满意了吧
myy 2005-06-13
  • 打赏
  • 举报
 回复
多谢各位，不过基本没有解决问题 :-(

net_lover(孟子E章) 写的只是input能随输入自动增大，甚至能把td 撑大，
我并不是要这样的效果。

我只是希望当td的宽度给定的情况下，页面显示后，
里面的一个text input + 多个button input 能不换行地充满td,

就象这种效果：(file 的“浏览”按钮是不会换到下一行的)

<table bgcolor="#ECE9D8">
<tr>
<td width="300">
<input id="fileup" type="file" value="" style="width: 100%;" />
</td>
</tr>
</table>
valley74 2005-06-13
  • 打赏
  • 举报
 回复
楼上的，用样式表来解决，不错，我临时为搂主 写了个javascript程序，测试通过
<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language=javascript>
function resize_textbox(){
var obj;
for(i=0;i<document.myform.elements.length;i++){
obj = document.myform.elements[i];
if (obj.type=="text"){
obj.style.width="100%";
}
}
}
</script>

</head>

<body onresize="javascript:resize_textbox()" onload="javascript:resize_textbox()">

<form name=myform action="">
<table border="1" width="100%">
<tr>
<td width="134">姓名</td>
<td><input type="text" name="T1" size="20"></td>
</tr>
<tr>
<td width="134">职业</td>
<td><input type="text" name="T2" size="20"></td>
</tr>
<tr>
<td width="134">毕业学校</td>
<td><input type="text" name="T3" size="20"></td>
</tr>
</table>
</form>

</body>

</html>
孟子E章 2005-06-13
  • 打赏
  • 举报
 回复
style="width:10;overflow:visible",将width设成10，岂不是很小？小不小你运行就知道了


<input id="edt" type="text" value="cdcd谁说10小？？？？？？？？？cd" style="width:10;overflow:visible" />
jiangjohy 2005-06-13
  • 打赏
  • 举报
 回复
10是小了点，overflow是设置对象的内容超过其指定高度及宽度时如何处理
visible:可以看到
auto：自动处理
hidden：隐藏
scroll滚动条
Jerry_a 2005-06-13
  • 打赏
  • 举报
 回复
菜鸟问：style="width:10;overflow:visible",将width设成10，岂不是很小？overflow是设置它的什么属性？
孟子E章 2005-06-13
  • 打赏
  • 举报
 回复
<input id="edt" type="text" value="cdcdcd" style="width:10;overflow:visible" />
myy 2005-06-13
  • 打赏
  • 举报
 回复
.
myy 2005-06-11
  • 打赏
  • 举报
 回复
一定要 分成多个 td 或嵌套 table 吗？
springwood 2005-06-11
  • 打赏
  • 举报
 回复
<table bgcolor="#ECE9D8">
<tr>
<td width="300">
<table width="100%" border=0>
<tr>
<td align="right" width="100%">
<input id="edt" type="text" value="cdcdcd" style="width:100%">
</td>
<td align="right"><input id="btn1" type="button" value="ssss" onclick="ins();" ><input id="btn2" type="button" value="rrrr" onclick="ins();" >
</td>
</tr>
</table>
</td>
</tr>
</table>
i三千 2005-06-11
  • 打赏
  • 举报
 回复
样式表好象也不能.你一行分成三列吧.第另两个按钮放在后两个单元格中.指定这两个单元格的固定宽度.这样可以不换行.
majiming 2005-06-11
  • 打赏
  • 举报
 回复
你把edt 宽度设为100%了,后面的当然要换行了
如何让组合框的宽度自动适应
在Windows Forms应用程序开发过程中，我们经常会用到组合框（ComboBox），但它的那个下拉列表宽度是固定的，那么如何让它支持自动适应的宽度呢。下面是一个小例子using System; using System.Drawing; using ...
百度UEditor插入图片尺寸自动适应编辑框大小问题
important;} /*去除点击图片后出现的...下面我就来给大家说说如果才能让UEditor插入图片尺寸自动适应编辑框大小。从这个文件里，就能看到有这一句：/*可以在这里添加你自己的css*/max-width: 100%;/*图片自适应宽度*/
Vue Tinymce富文本粘贴图片时让图片自适应编辑框宽度
Vue Tinymce富文本粘贴图片时让图片自适应编辑框宽度
UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的....这样子确实是可以在第一次加载的时候适应屏幕宽度,但...
ArcGIS标注文本超过指定宽度时的自动换行处理
通过创建适当的标注样式和编写标注文本表达式，您可以在ArcGIS中实现标注文本超过指定宽度时的自动换行效果。首先，我们需要创建一个适合的标注样式，以便在标注文本超过指定宽度时进行换行处理。现在，您的标注样式...
JavaScript

87,923

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章