VB.NET动态创建TextBox时宽度无法适配页面宽度如何解决

数据老陈

2026-10-6

问题原因

你遇到的是textarea（ASP.NET的MultiLine模式TextBox渲染后的原生标签）的默认盒模型计算规则导致的宽度溢出问题：
浏览器默认给textarea设置了非0的padding、border，且默认盒模型为content-box，此时你设置的width:20%仅指代内容区宽度，加上边框、内边距后总宽度会超过20%，一行无法放下5个输入框，就会出现右侧留白。而Button控件的默认盒模型规则或内置样式刚好适配了宽度计算，所以显示正常。

解决方案

方法1：直接在动态创建控件时添加样式修正

创建TextBox时追加盒模型、边距相关样式即可，修改你的代码如下：

For i As Integer = 1 To 100
        Dim newtext = New TextBox()
        newtext.TextMode = TextBoxMode.MultiLine
        newtext.Style.Add("width", "20%")
        newtext.Style.Add("height", "100%")
        ' 追加以下3行样式
        newtext.Style.Add("box-sizing", "border-box")
        newtext.Style.Add("margin", "0")
        newtext.Style.Add("padding", "2px") ' 可根据需要调整内边距大小，不会额外撑宽
        Panel2.Controls.Add(newtext)                
Next

方法2：通过全局CSS统一管控（更易维护）

先在页面头部添加CSS规则：

<style>
/* 给Panel2设置类名，避免影响其他页面元素 */
.panel2-wrap {
    box-sizing: border-box;
    font-size: 0; /* 消除inline元素之间的默认空格间隙 */
}
.panel2-wrap textarea {
    box-sizing: border-box;
    width: 20%;
    height: 100%;
    margin: 0;
    padding: 2px;
    font-size: 14px; /* 单独设置输入框字体大小，覆盖父容器的font-size:0 */
}
</style>

然后后台给Panel2设置对应类名，无需给每个动态TextBox单独加样式：

' 页面初始化时给Panel2加类名
Panel2.CssClass = "panel2-wrap"

For i As Integer = 1 To 100
        Dim newtext = New TextBox()
        newtext.TextMode = TextBoxMode.MultiLine
        Panel2.Controls.Add(newtext)                
Next